CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 406 · 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?
<h1 class="note" id="hero">Hi</h1>
CSS:
.note { color: red; }
.note { color: yellow; } (a) red (b) blue (c) white (d) yellow
2.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
3.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 20px;
  }
}
5.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) green (d) red
6.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 430px;
  justify-content: space-between;
}
Inside are 4 boxes, each 100px wide (no margins).
7.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
8.🌈 Which colour is #ffff00? (a) white (b) yellow (c) bright green (d) black
9.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
10.✍️ Which property is set to 300px in this rule?
.box {
  font-style: italic;
  width: 300px;
  border: 2px solid;
} (a) font-style (b) color (c) width (d) 300px
11.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 500px;
  justify-content: space-between;
}
Inside are 4 boxes, each 80px wide (no margins).
12.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
13.🖌️ How big is the text, in px?
h1 {
  background-color: white;
  text-align: right;
  color: purple;
  font-size: 24px;
}
14.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 260px;
  justify-content: center;
}
Inside are 2 boxes, each 50px wide (no margins).
15.✍️ What value is given to font-size in this rule?
h1 {
color: red;
font-size: 20px;
} (a) 20px (b) font-size (c) yellow (d) center
16.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
17.🖌️ Where does the text sit on its line?
li {
  text-align: left;
  color: blue;
  background-color: white;
  font-size: 20px;
} (a) on the right (b) on the left (c) in the middle
18.Which of these does HTML do? (a) makes a form box (b) reacts to a button click (c) shows a pop-up message (d) adds space around boxes
19.True or false: .note is an element selector. (a) False (b) True
20.🖌️ How big is the text, in px?
h1 {
  text-align: left;
  background-color: green;
  font-size: 36px;
  color: orange;
}
21.Which of these does JavaScript do? (a) sets colours and fonts (b) makes headings and lists (c) makes a form box (d) changes the page live
22.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 250px;
  padding: 25px;
  border: 2px solid black;
  margin: 20px;
}
23.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
24.✍️ Which property is set to red in this rule?
#top {
  font-style: italic;
  text-align: center;
  color: red;
  margin: 10px;
} (a) red (b) color (c) font-size (d) text-align
25.True or false: HTML puts a picture on a page. (a) True (b) False
26.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 480px) {
  p {
    font-size: 24px;
  }
}
27.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) blue (c) bright green (d) black
28.⚖️ What colour is the text of this element?
<h1 class="star" id="intro">Hi</h1>
CSS:
h1 { color: purple; }
h1 { color: blue; } (a) white (b) purple (c) orange (d) blue
29.🔍 Which is the odd one out? (a) reacts to a button click (b) makes headings and lists (c) makes a form box (d) puts a picture on a page
30.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 18px;
  }
}
31.Which of these does JavaScript do? (a) checks a quiz answer (b) rounds box corners (c) makes a form box (d) makes headings and lists
32.🌈 Which colour is #ffffff? (a) yellow (b) blue (c) red (d) white
33.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
34.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 230px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 40px wide (no margins).
35.True or false: .card is an element selector. (a) False (b) True
36.🖌️ How big is the text, in px?
p {
  text-align: left;
  color: blue;
  font-size: 12px;
  background-color: white;
}
37.🎯 Which CSS selector matches this element?
<p class="note" id="main">Hello</p> (a) .note (b) h1 (c) #logo (d) .big
38.⚖️ What colour is the text of this element?
<h2 class="note" id="intro">Hi</h2>
CSS:
.note { color: green; }
h2 { color: yellow; } (a) orange (b) yellow (c) green (d) white
39.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
40.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 130px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 60px wide (no margins).

Answer key

yellow
center
No
20
blue
10
600px or narrower
yellow
JavaScript
width
60
an id selector
24
80
20px
the screen width
on the left
makes a form box
False
36
changes the page live
344
;
color
True
16
blue
blue
reacts to a button click
20
checks a quiz answer
white
the later one
70
False
12
.note
green
an element selector
10

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