CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 968 · 40 questions

Code tip (Rule, then maths): Find the topic: syntax, selectors, properties, colours, box model, cascade, flexbox or media queries. Decide which rule or property applies to the element. For sizes, write the sum down: both sides for the box model, free space for flexbox.

NameDateTime takenScore ___ / 40

1.Which of these does HTML do? (a) sets colours and fonts (b) checks a quiz answer (c) changes the page live (d) makes a form box
2.⚖️ What colour is the text of this element?
<p class="big" id="hero">Hi</p>
CSS:
p { color: orange; }
.big { color: blue; } (a) blue (b) orange (c) white (d) green
3.⚖️ What colour is the text of this element?
<p class="box" id="hero">Hi</p>
CSS:
p { color: red; }
#hero { color: green; }
.box { color: white; } (a) red (b) yellow (c) green (d) white
4.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) margin (d) border
5.True or false: HTML checks a quiz answer. (a) False (b) True
6.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 330px;
  justify-content: space-between;
}
Inside are 4 boxes, each 60px wide (no margins).
7.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 200px;
  padding: 30px;
  border: 4px solid black;
  margin: 5px;
}
8.✍️ What value is given to margin in this rule?
p {
  border: 2px solid;
  margin: 10px;
  font-style: italic;
  width: 300px;
} (a) 8px (b) margin (c) 10px (d) bold
9.🖌️ How big is the text, in px?
h1 {
  font-size: 40px;
  background-color: white;
  text-align: left;
  color: yellow;
}
10.✍️ In color: blue; which part is the value? (a) ; (b) : (c) blue (d) color
11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 180px;
  padding: 15px;
  border: 1px solid black;
  margin: 10px;
}
12.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
13.⚖️ What colour is the text of this element?
<h1 class="red" id="hero">Hi</h1>
CSS:
#hero { color: yellow; }
#hero { color: orange; } (a) orange (b) green (c) purple (d) yellow
14.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 270px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 80px wide (no margins).
15.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
}
16.What does color do? (a) colours behind the text (b) makes the text bold (c) sets the letter colour (d) picks the font style
17.Which of these does CSS do? (a) makes a form box (b) adds space around boxes (c) gives the page structure (d) shows a pop-up message
18.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
19.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 100px;
  padding: 5px;
  border: 3px solid black;
  margin: 10px;
}
20.✍️ How does a CSS comment start? (a) # (b) /* (c) <!-- (d) //
21.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) justify-content (d) gap
22.🧩 Which language lays out the page? (a) HTML (b) CSS (c) JavaScript
23.✍️ What value is given to background-color in this rule?
#top {
  border: 2px solid;
  background-color: yellow;
  margin: 10px;
  color: red;
} (a) 10px (b) yellow (c) background-color (d) 8px
24.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) : (d) ;
25.True or false: h1 is an element selector. (a) False (b) True
26.⚖️ What colour is the text of this element?
<h1 class="red" id="intro">Hi</h1>
CSS:
#intro { color: yellow; }
#intro { color: blue; } (a) yellow (b) purple (c) blue (d) white
27.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
28.🖌️ How big is the text, in px?
li {
  font-size: 36px;
  color: yellow;
  background-color: red;
  text-align: right;
}
29.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the title tag (d) the br tag
30.📦 In the box model, which part is the text or picture? (a) margin (b) border (c) padding (d) content
31.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 200px;
  padding: 20px;
  border: 3px solid black;
  margin: 15px;
}
33.✍️ Which property is set to 8px in this rule?
body {
  padding: 8px;
  width: 300px;
  font-style: italic;
  margin: 10px;
} (a) border (b) font-weight (c) padding (d) 8px
34.✍️ Which property is set to 2px solid in this rule?
h2 {
  width: 300px;
  font-weight: bold;
  border: 2px solid;
} (a) border (b) 2px solid (c) width (d) font-style
35.What does background-color do? (a) sets the letter colour (b) makes letters bigger (c) colours behind the text (d) picks the font style
36.🌈 Which colour is #00ff00? (a) red (b) white (c) yellow (d) bright green
37.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 5px;
  border: 2px solid black;
  margin: 15px;
}
38.True or false: padding is the gap round content. (a) True (b) False
39.🖌️ How big is the text, in px?
h1 {
  text-align: right;
  font-size: 20px;
  color: orange;
  background-color: blue;
}
40.🧩 Which language changes the text size? (a) CSS (b) HTML (c) JavaScript

Answer key

makes a form box
blue
green
margin
False
30
278
10px
40
blue
212
an id selector
orange
30
18
sets the letter colour
adds space around boxes
{ }
136
/*
gap
CSS
yellow
;
True
blue
the screen width
36
the viewport meta tag
content
an element selector
246
padding
border
colours behind the text
bright green
124
True
20
CSS

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids