CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 311 · 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) center (b) space-between (c) flex-end (d) flex-start
2.⚖️ What colour is the text of this element?
<h1 class="note" id="logo">Hi</h1>
CSS:
h1 { color: white; }
h1 { color: orange; } (a) white (b) orange (c) black (d) green
3.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 600px) {
  p {
    font-size: 22px;
  }
}
4.🎯 What kind of selector is #main? (a) a class selector (b) an element selector (c) an id selector
5.🖌️ What colour are the letters?
p {
  font-size: 20px;
  background-color: white;
  color: orange;
  text-align: left;
} (a) purple (b) white (c) orange
6.💪 Which flexbox property picks row or column? (a) gap (b) flex-direction (c) justify-content (d) align-items
7.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 1024px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
8.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 200px;
  padding: 5px;
  border: 2px solid black;
  margin: 15px;
}
9.True or false: #logo is an id selector. (a) True (b) False
10.What does text-align do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes the text bold
11.🖌️ How big is the text, in px?
li {
  background-color: white;
  text-align: center;
  font-size: 36px;
  color: blue;
}
12.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 190px;
  padding: 20px;
  border: 2px solid black;
  margin: 20px;
}
13.⚖️ What colour is the text of this element?
<p class="note" id="top">Hi</p>
CSS:
p { color: orange; }
p { color: white; } (a) orange (b) green (c) yellow (d) white
14.✍️ What is the selector in this CSS rule?
.box {
  padding: 8px;
  color: red;
  background-color: yellow;
  font-style: italic;
} (a) red (b) padding (c) h2 (d) .box
15.🌈 In #007800 the green part is the hex number 78. What is it as a normal number?
16.🎯 Which element does the selector #end style? (a) <div class="red"> (b) <li id="end"> (c) <li class="end"> (d) <li id="hero">
17.⚖️ What colour is the text of this element?
<h2 class="note" id="end">Hi</h2>
CSS:
#end { color: red; }
#end { color: black; } (a) yellow (b) red (c) orange (d) black
18.✍️ Which property is set to 2px solid in this rule?
body {
  color: red;
  border: 2px solid;
  font-size: 20px;
  padding: 8px;
} (a) font-style (b) border (c) 2px solid (d) width
19.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
20.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 340px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
21.⚖️ What colour is the text of this element?
<h1 class="menu" id="intro">Hi</h1>
CSS:
#intro { color: blue; }
h1 { color: green; } (a) blue (b) green (c) black (d) purple
22.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
23.🖌️ What colour are the letters?
h2 {
  text-align: right;
  background-color: red;
  color: orange;
  font-size: 32px;
} (a) orange (b) red (c) yellow
24.🎯 Which sign starts a class selector? (a) @ (b) . (c) # (d) &
25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the first one (d) the shorter one
26.True or false: body is an element selector. (a) True (b) False
27.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
28.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
29.✍️ What value is given to font-size in this rule?
li {
  font-size: 20px;
  width: 300px;
  margin: 10px;
} (a) center (b) 20px (c) yellow (d) font-size
30.✍️ How many declarations (property: value pairs) are in this rule?
body {
  text-align: center;
  font-size: 20px;
  color: red;
  font-weight: bold;
}
31.⚖️ What colour is the text of this element?
<h1 class="menu" id="top">Hi</h1>
CSS:
h1 { color: blue; }
#top { color: white; }
.menu { color: orange; } (a) green (b) white (c) blue (d) orange
32.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="note"> (c) <li id="intro"> (d) <p class="note">
33.True or false: CSS makes headings and lists. (a) True (b) False
34.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 2 (d) 5
35.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) display: flex (d) justify-content
36.🖌️ How big is the text, in px?
li {
  color: white;
  background-color: yellow;
  text-align: right;
  font-size: 36px;
}
37.⚖️ What colour is the text of this element?
<h1 class="menu" id="hero">Hi</h1>
CSS:
h1 { color: white; }
h1 { color: black; } (a) black (b) green (c) white (d) yellow
38.🎯 Which sign starts an id selector? (a) @ (b) # (c) & (d) .
39.✍️ What value is given to color in this rule?
.box {
  text-align: center;
  font-size: 20px;
  margin: 10px;
  color: red;
} (a) color (b) 20px (c) center (d) red
40.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript

Answer key

flex-start
orange
22
an id selector
orange
flex-direction
Yes
244
True
centres a heading
36
274
white
.box
120
<li id="end">
black
border
equal gaps, none at ends
70
blue
color
orange
.
the later one
True
the screen width
No
20px
4
white
<p class="note">
False
1
gap
36
black
#
red
CSS

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