CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 702 · 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 language gives the page structure? (a) JavaScript (b) HTML (c) CSS
2.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
3.🖌️ What colour are the letters?
h1 {
  color: green;
  text-align: right;
  background-color: orange;
  font-size: 36px;
} (a) black (b) green (c) orange
4.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
5.🔍 Which is the odd one out? (a) reacts to a button click (b) changes the page live (c) checks a quiz answer (d) makes a form box
6.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) border (d) margin
7.What does font-weight do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
8.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
9.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 130px;
  padding: 5px;
  border: 5px solid black;
  margin: 0px;
}
10.✍️ What value is given to font-style in this rule?
li {
  border: 2px solid;
  font-size: 20px;
  font-style: italic;
} (a) font-style (b) 20px (c) red (d) italic
11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
12.True or false: .note is an id selector. (a) False (b) True
13.🎯 Which element does the selector h1 style? (a) <div id="intro"> (b) <li class="box"> (c) <h2> (d) <h1 class="box">
14.🖌️ Where does the text sit on its line?
li {
  background-color: black;
  text-align: center;
  font-size: 40px;
  color: red;
} (a) on the left (b) on the right (c) in the middle
15.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 140px;
  padding: 25px;
  border: 4px solid black;
  margin: 0px;
}
17.True or false: the content is the gap round content. (a) False (b) True
18.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) space-between (c) flex-start (d) center
19.🎯 Which element does the selector #top style? (a) <h2 id="top"> (b) <h2 id="intro"> (c) <li class="big"> (d) <h2 class="top">
20.⚖️ What colour is the text of this element?
<h1 class="big" id="intro">Hi</h1>
CSS:
h1 { color: white; }
h1 { color: blue; } (a) blue (b) yellow (c) white (d) purple
21.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 230px;
  justify-content: space-between;
}
Inside are 2 boxes, each 80px wide (no margins).
22.Which of these does HTML do? (a) checks a quiz answer (b) adds space around boxes (c) makes a link (d) sets colours and fonts
23.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
24.True or false: .card is an id selector. (a) True (b) False
25.🖌️ How big is the text, in px?
h1 {
  color: white;
  background-color: red;
  text-align: left;
  font-size: 16px;
}
26.⚖️ What colour is the text of this element?
<h1 class="red" id="top">Hi</h1>
CSS:
h1 { color: red; }
.red { color: purple; } (a) white (b) green (c) purple (d) red
27.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
28.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
30.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 400px;
  justify-content: center;
}
Inside are 4 boxes, each 80px wide (no margins).
31.🖌️ What colour is behind the letters?
h2 {
  text-align: right;
  font-size: 40px;
  background-color: green;
  color: purple;
} (a) white (b) purple (c) green
32.✍️ What is the selector in this CSS rule?
h1 {
  text-align: center;
  padding: 8px;
  border: 2px solid;
  font-style: italic;
} (a) text-align (b) p (c) h1 (d) 8px
33.True or false: the border is the gap round content. (a) False (b) True
34.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) gap (d) display: flex
35.✍️ Which property is set to 2px solid in this rule?
h2 {
  border: 2px solid;
  padding: 8px;
  text-align: center;
  font-weight: bold;
} (a) width (b) font-style (c) 2px solid (d) border
36.True or false: HTML changes the page live. (a) False (b) True
37.⚖️ What colour is the text of this element?
<h2 class="box" id="main">Hi</h2>
CSS:
#main { color: green; }
.box { color: purple; }
h2 { color: black; } (a) orange (b) purple (c) green (d) black
38.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
39.✍️ Which property is set to 8px in this rule?
.note {
  padding: 8px;
  margin: 10px;
  background-color: yellow;
  font-size: 20px;
} (a) 8px (b) font-weight (c) padding (d) border
40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 26px;
  }
}

Answer key

HTML
an element selector
green
.
makes a form box
padding
makes the text bold
puts boxes in the middle
150
italic
the later one
False
<h1 class="box">
in the middle
#
198
False
space-between
<h2 id="top">
blue
70
makes a link
{ }
False
16
purple
a class selector
an id selector
122
40
green
h1
False
flex-direction
border
False
green
600px or narrower
padding
24

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