CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 414 · 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.⚖️ What colour is the text of this element?
<h2 class="big" id="intro">Hi</h2>
CSS:
.big { color: purple; }
.big { color: yellow; } (a) red (b) yellow (c) blue (d) purple
2.🖌️ What colour is behind the letters?
h1 {
  color: yellow;
  background-color: purple;
  font-size: 36px;
  text-align: left;
} (a) purple (b) yellow (c) black
3.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 110px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 40px wide (no margins).
4.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
5.🎯 Which element does the selector .star style? (a) <li id="star"> (b) <li class="star"> (c) <li class="menu"> (d) <div class="note">
6.Which of these does HTML do? (a) changes the text size (b) checks a quiz answer (c) adds space around boxes (d) makes a link
7.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
8.🎯 What kind of selector is #top? (a) a class selector (b) an id selector (c) an element selector
9.🖌️ Which CSS property colours behind the text? (a) text-align (b) background-color (c) font-weight (d) font-size
10.✍️ What is the selector in this CSS rule?
body {
  font-size: 20px;
  border: 2px solid;
  font-style: italic;
} (a) .box (b) body (c) 2px solid (d) font-size
11.✍️ Which property is set to 20px in this rule?
p {
  border: 2px solid;
  font-style: italic;
  margin: 10px;
  font-size: 20px;
} (a) text-align (b) font-size (c) 20px (d) background-color
12.🖌️ What colour are the letters?
h2 {
  font-size: 24px;
  background-color: orange;
  color: black;
  text-align: left;
} (a) orange (b) white (c) black
13.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
14.🌈 Which colour is #ffffff? (a) yellow (b) blue (c) white (d) red
15.True or false: padding is the line round the box. (a) True (b) False
16.🖌️ Where does the text sit on its line?
h1 {
  background-color: yellow;
  text-align: right;
  font-size: 36px;
  color: black;
} (a) on the left (b) in the middle (c) on the right
17.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
18.🌈 In #0000cf the blue part is the hex number cf. What is it as a normal number?
19.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
20.🔍 Which is the odd one out? (a) adds space around boxes (b) makes headings and lists (c) gives the page structure (d) puts a picture on a page
21.✍️ What value is given to border in this rule?
.note {
  padding: 8px;
  border: 2px solid;
  font-style: italic;
  font-size: 20px;
} (a) italic (b) border (c) 300px (d) 2px solid
22.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
23.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) flex-start (d) space-between
24.✍️ What is the selector in this CSS rule?
h2 {
  font-size: 20px;
  padding: 8px;
  text-align: center;
  border: 2px solid;
} (a) h2 (b) font-size (c) 8px (d) h1
25.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (min-width: 480px) {
  p {
    font-size: 24px;
  }
} (a) Yes (b) No
26.⚖️ What colour is the text of this element?
<p class="red" id="top">Hi</p>
CSS:
p { color: white; }
p { color: red; } (a) blue (b) red (c) white (d) black
27.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
28.✍️ In color: blue; which part is the property? (a) blue (b) : (c) color (d) ;
29.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 340px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 290px;
  padding: 15px;
  border: 1px solid black;
  margin: 0px;
}
31.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
32.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 3 (d) 2
33.True or false: HTML counts down a timer. (a) True (b) False
34.⚖️ What colour is the text of this element?
<p class="star" id="top">Hi</p>
CSS:
#top { color: blue; }
p { color: purple; } (a) white (b) green (c) blue (d) purple
35.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 20px;
  }
} (a) No (b) Yes
36.✍️ Which property is set to italic in this rule?
#top {
width: 300px;
font-style: italic;
} (a) color (b) font-style (c) italic (d) font-size
37.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
38.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
39.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the hr tag (d) the title tag
40.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 18px;
  }
}

Answer key

yellow
purple
30
;
<li class="star">
makes a link
/*
an id selector
background-color
body
font-size
black
packs boxes at the end
white
False
on the right
red
207
CSS
adds space around boxes
2px solid
an id selector
center
h2
No
red
blue
color
70
322
equal gaps, none at ends
3
False
blue
No
font-style
No
an element selector
the viewport meta tag
18

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