CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 799 · 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 selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
2.🔍 Which is the odd one out? (a) reacts to a button click (b) adds space around boxes (c) rounds box corners (d) sets colours and fonts
3.🌈 Which colour of light is strongest in rgb(38, 0, 253)? (a) green (b) red (c) blue
4.✍️ In color: blue; which part is the value? (a) ; (b) blue (c) : (d) color
5.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) justify-content (c) flex-direction (d) display: flex
6.⚖️ What colour is the text of this element?
<h2 class="red" id="end">Hi</h2>
CSS:
.red { color: blue; }
.red { color: orange; } (a) purple (b) blue (c) orange (d) black
7.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 50px;
  padding: 20px;
  border: 1px solid black;
  margin: 5px;
}
8.🌈 Which hex code is black? (a) #000000 (b) #00ff00 (c) #00ffff (d) #ff00ff
9.🎯 Which CSS selector matches this element?
<p class="note" id="top">Hello</p> (a) p (b) .big (c) .top (d) h1
10.🌈 In #00f100 the green part is the hex number f1. What is it as a normal number?
11.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 320px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
12.⚖️ What colour is the text of this element?
<h2 class="red" id="logo">Hi</h2>
CSS:
.red { color: orange; }
.red { color: black; } (a) orange (b) yellow (c) red (d) black
13.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
14.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
15.🧩 Which language reacts to a button click? (a) JavaScript (b) CSS (c) HTML
16.🌈 Which colour is #ffffff? (a) white (b) yellow (c) red (d) cyan
17.Which of these does CSS do? (a) gives the page structure (b) makes a form box (c) rounds box corners (d) shows a pop-up message
18.🎨 Which tag holds CSS inside the head? (a) <style> (b) <css> (c) <script> (d) <body>
19.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) bright green (c) white (d) blue
20.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the title tag (d) the br tag
21.Which of these does HTML do? (a) adds space around boxes (b) makes a form box (c) changes the text size (d) lays out the page
22.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
23.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (min-width: 480px) {
  p {
    font-size: 20px;
  }
} (a) No (b) Yes
24.⚖️ What colour is the text of this element?
<h1 class="big" id="intro">Hi</h1>
CSS:
h1 { color: black; }
h1 { color: orange; } (a) green (b) yellow (c) black (d) orange
25.What does font-size do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) picks the font style
26.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 90px;
  padding: 15px;
  border: 5px solid black;
  margin: 10px;
}
27.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 768px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
28.✍️ What is the selector in this CSS rule?
li {
  text-align: center;
  font-style: italic;
  color: red;
  font-weight: bold;
} (a) text-align (b) italic (c) body (d) li
29.⚖️ What colour is the text of this element?
<h1 class="star" id="end">Hi</h1>
CSS:
h1 { color: yellow; }
h1 { color: blue; } (a) red (b) black (c) yellow (d) blue
30.🎯 Which sign starts an id selector? (a) # (b) @ (c) . (d) &
31.⚖️ What colour is the text of this element?
<h1 class="star" id="main">Hi</h1>
CSS:
h1 { color: black; }
.star { color: green; }
#main { color: orange; } (a) black (b) orange (c) green (d) purple
32.💪 Which flexbox property picks row or column? (a) display: flex (b) justify-content (c) flex-direction (d) align-items
33.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
34.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
35.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 420px;
  justify-content: space-between;
}
Inside are 3 boxes, each 100px wide (no margins).
36.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
37.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
}
38.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 150px;
  justify-content: space-between;
}
Inside are 2 boxes, each 40px wide (no margins).
39.✍️ Which property is set to red in this rule?
li {
  font-style: italic;
  text-align: center;
  color: red;
  border: 2px solid;
} (a) font-size (b) text-align (c) red (d) color
40.What does color do? (a) colours behind the text (b) makes the text bold (c) picks the font style (d) sets the letter colour

Answer key

an id selector
reacts to a button click
blue
blue
justify-content
orange
102
#000000
p
241
60
black
270
.
JavaScript
white
rounds box corners
<style>
bright green
the viewport meta tag
makes a form box
an element selector
No
orange
makes letters bigger
130
No
li
blue
#
orange
flex-direction
240
:
60
1
12
70
color
sets the letter colour

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