CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 172 · 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 hex code is blue? (a) #00ff00 (b) #ffff00 (c) #ffffff (d) #0000ff
2.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 220px;
  justify-content: flex-start;
}
Inside are 4 boxes, each 40px wide (no margins).
3.🎯 Which CSS selector matches this element?
<li class="star" id="intro">Hello</li> (a) .menu (b) #intro (c) .intro (d) #star
4.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
5.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the title tag (d) the hr tag
6.✍️ What is the selector in this CSS rule?
.note {
  margin: 10px;
  color: red;
  background-color: yellow;
  font-style: italic;
} (a) margin (b) .note (c) #top (d) red
7.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 140px;
  padding: 25px;
  border: 4px solid black;
  margin: 10px;
}
8.🌈 Which colour of light is strongest in rgb(179, 68, 78)? (a) green (b) red (c) blue
9.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
10.🎯 Which CSS selector matches this element?
<p class="red" id="main">Hello</p> (a) #red (b) #logo (c) #main (d) .main
11.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 1024px) {
  p {
    font-size: 24px;
  }
} (a) No (b) Yes
12.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 120px;
  padding: 20px;
  border: 3px solid black;
  margin: 15px;
}
13.✍️ In color: blue; which part is the property? (a) blue (b) color (c) ; (d) :
14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 160px;
  padding: 5px;
  border: 3px solid black;
  margin: 0px;
}
15.🖌️ What colour is behind the letters?
h1 {
  background-color: blue;
  font-size: 32px;
  color: black;
  text-align: left;
} (a) blue (b) black (c) white
16.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
17.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 80px;
  padding: 10px;
  border: 5px solid black;
  margin: 0px;
}
18.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
19.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 280px;
  justify-content: center;
}
Inside are 3 boxes, each 60px wide (no margins).
20.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 22px;
  }
}
21.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
22.🎯 Which CSS selector matches this element?
<li class="big" id="logo">Hello</li> (a) div (b) #big (c) #end (d) .big
23.True or false: HTML changes the page live. (a) False (b) True
24.💪 Which flexbox property lines boxes up across? (a) gap (b) flex-direction (c) align-items (d) justify-content
25.⚖️ What colour is the text of this element?
<p class="star" id="top">Hi</p>
CSS:
#top { color: blue; }
#top { color: yellow; } (a) yellow (b) red (c) blue (d) white
26.⚖️ What colour is the text of this element?
<h1 class="note" id="main">Hi</h1>
CSS:
h1 { color: orange; }
h1 { color: yellow; } (a) green (b) orange (c) red (d) yellow
27.🌈 In #00005b the blue part is the hex number 5b. What is it as a normal number?
28.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 3 (d) 2
29.✍️ What is the selector in this CSS rule?
h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
} (a) font-size (b) h2 (c) h1 (d) bold
30.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
31.⚖️ What colour is the text of this element?
<h2 class="red" id="logo">Hi</h2>
CSS:
#logo { color: green; }
#logo { color: red; } (a) purple (b) blue (c) green (d) red
32.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
33.🎯 What kind of selector is .card? (a) a class selector (b) an id selector (c) an element selector
34.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 280px;
  justify-content: center;
}
Inside are 4 boxes, each 40px wide (no margins).
35.🎨 Which attribute adds CSS inside one tag? (a) src (b) alt (c) style (d) href
36.✍️ Which property is set to center in this rule?
p {
  margin: 10px;
  color: red;
  text-align: center;
  padding: 8px;
} (a) margin (b) background-color (c) text-align (d) center
37.✍️ How many declarations (property: value pairs) are in this rule?
li {
  font-size: 20px;
  color: red;
  background-color: yellow;
}
38.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 440px;
  justify-content: space-between;
}
Inside are 4 boxes, each 80px wide (no margins).
39.True or false: h1 is an element selector. (a) True (b) False
40.Which of these does HTML do? (a) lays out the page (b) changes the page live (c) makes headings and lists (d) adds space around boxes

Answer key

#0000ff
60
#intro
blue
the viewport meta tag
.note
218
red
center
#main
No
196
color
176
blue
an id selector
110
flex-start
50
22
red
.big
False
align-items
yellow
yellow
91
3
h2
equal gaps, none at ends
red
JavaScript
a class selector
60
style
text-align
3
40
True
makes headings and lists

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