CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 437 · 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 justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
2.🖌️ What colour are the letters?
p {
  color: blue;
  background-color: yellow;
  font-size: 16px;
  text-align: left;
} (a) yellow (b) blue (c) green
3.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) : (d) ,
4.🖌️ How big is the text, in px?
li {
  font-size: 28px;
  background-color: yellow;
  color: blue;
  text-align: right;
}
5.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) // (d) #
6.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 30px;
  border: 3px solid black;
  margin: 5px;
}
7.🖌️ What colour are the letters?
p {
  font-size: 32px;
  background-color: orange;
  text-align: left;
  color: white;
} (a) blue (b) white (c) orange
8.🖌️ What colour is behind the letters?
h2 {
  text-align: left;
  color: black;
  background-color: red;
  font-size: 20px;
} (a) black (b) red (c) white
9.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 6 (d) 3
10.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 600px) {
  p {
    font-size: 22px;
  }
}
11.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) black (c) cyan (d) magenta
12.Which of these does JavaScript do? (a) sets colours and fonts (b) gives the page structure (c) lays out the page (d) changes the page live
13.Which of these does HTML do? (a) shows a pop-up message (b) gives the page structure (c) counts down a timer (d) changes the text size
14.What does background-color do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
15.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
16.✍️ In color: blue; which part is the property? (a) ; (b) color (c) blue (d) :
17.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
18.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) content (d) margin
19.🎯 Which CSS selector matches this element?
<h1 class="note" id="logo">Hello</h1> (a) h2 (b) #note (c) .note (d) #end
20.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
21.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 300px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
22.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-start (d) flex-end
23.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 230px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 50px wide (no margins).
24.⚖️ What colour is the text of this element?
<h1 class="note" id="intro">Hi</h1>
CSS:
.note { color: white; }
#intro { color: red; } (a) green (b) orange (c) white (d) red
25.✍️ How many declarations (property: value pairs) are in this rule?
.note {
text-align: center;
}
26.🎯 What kind of selector is h1? (a) a class selector (b) an id selector (c) an element selector
27.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
28.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
29.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 130px;
  justify-content: flex-end;
}
Inside are 3 boxes, each 40px wide (no margins).
30.✍️ How many declarations (property: value pairs) are in this rule?
li {
font-weight: bold;
padding: 8px;
}
31.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 50px;
  padding: 5px;
  border: 3px solid black;
  margin: 15px;
}
32.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 480px) {
  p {
    font-size: 24px;
  }
}
33.🖌️ Where does the text sit on its line?
h1 {
  background-color: yellow;
  text-align: left;
  font-size: 40px;
  color: white;
} (a) in the middle (b) on the right (c) on the left
34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 32px;
  }
}
35.Which of these does CSS do? (a) changes the page live (b) puts a picture on a page (c) changes the text size (d) gives the page structure
36.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
37.🎯 Can many elements share the same class? (a) No (b) Yes
38.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 180px;
  padding: 25px;
  border: 1px solid black;
  margin: 20px;
}
39.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 20px;
  border: 2px solid black;
  margin: 5px;
}
40.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Answer key

flex-start
blue
;
28
/*
156
white
red
3
16
bright green
changes the page live
gives the page structure
colours behind the text
the viewport meta tag
color
packs boxes at the start
margin
.note
CSS
50
center
30
red
1
an element selector
the screen width
JavaScript
10
2
96
24
on the left
24
changes the text size
a class selector
Yes
272
224
174

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