CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 590 · 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 of these does CSS do? (a) puts a picture on a page (b) reacts to a button click (c) changes the text size (d) changes the page live
2.True or false: #end is an id selector. (a) True (b) False
3.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 90px;
  padding: 20px;
  border: 2px solid black;
  margin: 0px;
}
4.🎯 What kind of selector is .menu? (a) an id selector (b) an element selector (c) a class selector
5.🎯 Which element does the selector h1 style? (a) <h2> (b) <h1 class="note"> (c) <div id="intro"> (d) <li class="note">
6.⚖️ What colour is the text of this element?
<h1 class="note" id="main">Hi</h1>
CSS:
h1 { color: black; }
.note { color: orange; } (a) orange (b) white (c) red (d) black
7.⚖️ What colour is the text of this element?
<h2 class="menu" id="top">Hi</h2>
CSS:
#top { color: white; }
.menu { color: purple; }
h2 { color: orange; } (a) red (b) white (c) orange (d) purple
8.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
9.✍️ In color: blue; which part is the property? (a) blue (b) color (c) : (d) ;
10.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
11.🖌️ What colour are the letters?
p {
  background-color: red;
  font-size: 24px;
  text-align: center;
  color: purple;
} (a) orange (b) purple (c) red
12.🎯 Which sign starts a class selector? (a) @ (b) . (c) # (d) &
13.True or false: the border is space inside the border. (a) True (b) False
14.🌈 Which hex code is red? (a) #000000 (b) #0000ff (c) #ff0000 (d) #ffffff
15.🌈 Which colour is #ffff00? (a) magenta (b) bright green (c) red (d) yellow
16.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 160px;
  justify-content: flex-end;
}
Inside are 3 boxes, each 50px wide (no margins).
17.✍️ What value is given to font-style in this rule?
li {
  font-size: 20px;
  font-style: italic;
  margin: 10px;
} (a) 20px (b) font-style (c) red (d) italic
18.🎯 Which CSS selector matches this element?
<h2 class="note" id="end">Hello</h2> (a) .big (b) #note (c) #hero (d) .note
19.⚖️ What colour is the text of this element?
<h2 class="star" id="top">Hi</h2>
CSS:
h2 { color: green; }
h2 { color: yellow; } (a) green (b) white (c) yellow (d) purple
20.⚖️ What colour is the text of this element?
<h2 class="menu" id="main">Hi</h2>
CSS:
.menu { color: blue; }
h2 { color: red; } (a) orange (b) blue (c) red (d) green
21.🖌️ What colour is behind the letters?
h1 {
  text-align: center;
  color: red;
  background-color: purple;
  font-size: 20px;
} (a) yellow (b) red (c) purple
22.What does color do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
23.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 14px;
  }
}
24.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 140px;
  justify-content: space-between;
}
Inside are 2 boxes, each 60px wide (no margins).
25.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
26.🎯 Which CSS selector matches this element?
<h1 class="note" id="main">Hello</h1> (a) #note (b) .main (c) .big (d) h1
27.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the br tag (d) the title tag
28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
29.⚖️ What colour is the text of this element?
<h2 class="red" id="logo">Hi</h2>
CSS:
h2 { color: green; }
h2 { color: yellow; } (a) yellow (b) purple (c) white (d) green
30.🖌️ What colour are the letters?
h1 {
  background-color: blue;
  font-size: 16px;
  text-align: center;
  color: green;
} (a) green (b) black (c) blue
31.✍️ Which property is set to 2px solid in this rule?
.note {
  text-align: center;
  color: red;
  border: 2px solid;
} (a) 2px solid (b) border (c) width (d) font-style
32.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 28px;
  }
}
33.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
34.✍️ Which property is set to yellow in this rule?
.note {
  color: red;
  background-color: yellow;
  font-style: italic;
} (a) margin (b) yellow (c) background-color (d) padding
35.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
36.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) color (d) font-size
37.✍️ What value is given to color in this rule?
.box {
  color: red;
  margin: 10px;
  background-color: yellow;
} (a) center (b) red (c) 20px (d) color
38.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
39.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) bright green (c) magenta (d) black
40.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
}

Answer key

changes the text size
True
134
a class selector
<h1 class="note">
orange
white
;
color
JavaScript
purple
.
False
#ff0000
yellow
10
italic
.note
yellow
blue
purple
sets the letter colour
12
20
an element selector
h1
the viewport meta tag
the later one
yellow
green
border
28
14
background-color
an element selector
text-align
red
the screen width
black
12

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