CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 723 · 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) makes headings and lists (b) gives the page structure (c) rounds box corners (d) makes a link
2.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
3.⚖️ What colour is the text of this element?
<p class="big" id="logo">Hi</p>
CSS:
p { color: black; }
#logo { color: blue; }
.big { color: purple; } (a) blue (b) purple (c) white (d) black
4.🌈 Which hex code is red? (a) #0000ff (b) #00ff00 (c) #ff00ff (d) #ff0000
5.Which of these does CSS do? (a) makes headings and lists (b) lays out the page (c) changes the page live (d) gives the page structure
6.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 270px;
  padding: 10px;
  border: 5px solid black;
  margin: 5px;
}
7.🌈 In #ad0000 the red part is the hex number ad. What is it as a normal number?
8.🖌️ Where does the text sit on its line?
li {
  font-size: 20px;
  background-color: purple;
  color: white;
  text-align: left;
} (a) on the right (b) on the left (c) in the middle
9.✍️ In color: blue; which part is the property? (a) color (b) blue (c) : (d) ;
10.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
11.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) background-color (c) color (d) font-family
12.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
13.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 200px;
  justify-content: center;
}
Inside are 3 boxes, each 40px wide (no margins).
14.✍️ How many declarations (property: value pairs) are in this rule?
.box {
  border: 2px solid;
  font-size: 20px;
  font-weight: bold;
}
15.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
16.🌈 Which hex code is black? (a) #00ffff (b) #ffff00 (c) #ffffff (d) #000000
17.⚖️ What colour is the text of this element?
<p class="box" id="intro">Hi</p>
CSS:
.box { color: white; }
p { color: green; } (a) green (b) blue (c) yellow (d) white
18.⚖️ What colour is the text of this element?
<h1 class="big" id="top">Hi</h1>
CSS:
h1 { color: white; }
#top { color: black; }
.big { color: blue; } (a) white (b) yellow (c) black (d) blue
19.✍️ How many declarations (property: value pairs) are in this rule?
.note {
  margin: 10px;
  width: 300px;
  padding: 8px;
  font-size: 20px;
}
20.✍️ Which property is set to yellow in this rule?
li {
  width: 300px;
  font-size: 20px;
  background-color: yellow;
} (a) background-color (b) yellow (c) padding (d) margin
21.⚖️ What colour is the text of this element?
<h1 class="menu" id="logo">Hi</h1>
CSS:
h1 { color: orange; }
h1 { color: purple; } (a) orange (b) yellow (c) green (d) purple
22.🖌️ What colour are the letters?
p {
  font-size: 12px;
  color: purple;
  text-align: center;
  background-color: green;
} (a) purple (b) black (c) green
23.✍️ What is the selector in this CSS rule?
p {
  font-weight: bold;
  font-style: italic;
  background-color: yellow;
  padding: 8px;
} (a) font-weight (b) italic (c) p (d) .note
24.Which of these does HTML do? (a) changes the page live (b) checks a quiz answer (c) makes headings and lists (d) adds space around boxes
25.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
26.What does text-align do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) centres a heading
27.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
28.🖌️ How big is the text, in px?
p {
  text-align: right;
  background-color: purple;
  font-size: 36px;
  color: red;
}
29.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
30.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
31.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 100 (c) 99 (d) 1000
32.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 400px;
  justify-content: center;
}
Inside are 3 boxes, each 80px wide (no margins).
33.What does justify-content: flex-start do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
34.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) black (c) magenta (d) white
35.Which of these does CSS do? (a) sets colours and fonts (b) puts a picture on a page (c) counts down a timer (d) checks a quiz answer
36.⚖️ What colour is the text of this element?
<h1 class="big" id="hero">Hi</h1>
CSS:
#hero { color: orange; }
#hero { color: red; } (a) orange (b) red (c) blue (d) black
37.⚖️ What colour is the text of this element?
<h2 class="note" id="main">Hi</h2>
CSS:
h2 { color: orange; }
.note { color: blue; } (a) blue (b) orange (c) green (d) red
38.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
}
39.🖌️ Which CSS property centres a heading? (a) font-size (b) color (c) font-weight (d) text-align
40.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) flex-start (d) center

Answer key

rounds box corners
style
blue
#ff0000
lays out the page
310
173
on the left
color
JavaScript
color
CSS
40
3
:
#000000
white
black
4
background-color
purple
purple
p
makes headings and lists
600px or narrower
centres a heading
a class selector
36
{ }
the later one
255
80
packs boxes at the start
cyan
sets colours and fonts
red
blue
22
text-align
flex-end

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