CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 939 · 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="box" id="main">Hi</h2>
CSS:
h2 { color: blue; }
.box { color: green; } (a) white (b) yellow (c) green (d) blue
2.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 320px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
3.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) margin (d) content
4.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 18px;
  }
} (a) No (b) Yes
5.True or false: the border is the line round the box. (a) False (b) True
6.True or false: .note is a class selector. (a) False (b) True
7.🖌️ Which CSS property centres a heading? (a) font-family (b) background-color (c) text-align (d) color
8.💪 Which flexbox property picks row or column? (a) gap (b) flex-direction (c) display: flex (d) justify-content
9.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
10.✍️ What is the selector in this CSS rule?
.box {
margin: 10px;
background-color: yellow;
} (a) .box (b) h2 (c) yellow (d) margin
11.🖌️ Where does the text sit on its line?
h1 {
  background-color: red;
  text-align: center;
  font-size: 36px;
  color: white;
} (a) on the right (b) on the left (c) in the middle
12.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
13.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 8px;
  }
}
14.🎯 Which CSS selector matches this element?
<p class="note" id="intro">Hello</p> (a) #intro (b) h1 (c) #main (d) .intro
15.✍️ How many declarations (property: value pairs) are in this rule?
.note {
color: red;
font-size: 20px;
}
16.🖌️ Where does the text sit on its line?
p {
  text-align: right;
  background-color: white;
  font-size: 40px;
  color: black;
} (a) in the middle (b) on the right (c) on the left
17.🖌️ Which CSS property makes letters bigger? (a) font-family (b) color (c) font-weight (d) font-size
18.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
19.Which of these does HTML do? (a) rounds box corners (b) puts a picture on a page (c) counts down a timer (d) changes the page live
20.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
21.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 70px;
  padding: 10px;
  border: 1px solid black;
  margin: 15px;
}
22.⚖️ What colour is the text of this element?
<p class="big" id="end">Hi</p>
CSS:
.big { color: blue; }
.big { color: red; } (a) blue (b) white (c) green (d) red
23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
}
24.⚖️ What colour is the text of this element?
<p class="big" id="top">Hi</p>
CSS:
p { color: blue; }
#top { color: orange; }
.big { color: green; } (a) black (b) orange (c) blue (d) green
25.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
26.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 190px;
  padding: 20px;
  border: 1px solid black;
  margin: 20px;
}
27.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) green (d) red
28.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 230px;
  padding: 25px;
  border: 4px solid black;
  margin: 15px;
}
29.🌈 In #5f0000 the red part is the hex number 5f. What is it as a normal number?
30.✍️ What is the selector in this CSS rule?
.box {
  border: 2px solid;
  text-align: center;
  color: red;
  background-color: yellow;
} (a) h2 (b) .box (c) border (d) center
31.✍️ What value is given to text-align in this rule?
body {
  padding: 8px;
  color: red;
  font-weight: bold;
  text-align: center;
} (a) 10px (b) yellow (c) text-align (d) center
32.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
33.🔍 Which is the odd one out? (a) makes a link (b) reacts to a button click (c) counts down a timer (d) changes the page live
34.What does justify-content: space-between do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
35.🌈 Which colour is #ff00ff? (a) cyan (b) blue (c) magenta (d) white
36.🎯 Which CSS selector matches this element?
<h1 class="note" id="main">Hello</h1> (a) h2 (b) #note (c) .note (d) .big
37.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) . (d) ,
38.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 8px;
  }
}
39.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 190px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 60px wide (no margins).
40.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <a> (d) <img>

Answer key

green
60
margin
No
True
True
text-align
flex-direction
an id selector
.box
in the middle
JavaScript
8
#intro
2
on the right
font-size
a class selector
puts a picture on a page
color
122
red
16
orange
the screen width
272
blue
318
95
.box
center
an id selector
makes a link
equal gaps, none at ends
magenta
.note
;
12
70
<link>

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