CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 54 · 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 sign starts a class selector? (a) & (b) # (c) . (d) @
2.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
3.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
4.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
5.✍️ What is the selector in this CSS rule?
h2 {
text-align: center;
margin: 10px;
} (a) 10px (b) h2 (c) h1 (d) text-align
6.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 32px;
  }
}
7.✍️ Which property is set to 8px in this rule?
h1 {
  padding: 8px;
  font-weight: bold;
  font-size: 20px;
  margin: 10px;
} (a) border (b) 8px (c) padding (d) font-weight
8.✍️ What is the selector in this CSS rule?
.note {
  font-weight: bold;
  text-align: center;
  color: red;
  font-size: 20px;
} (a) font-weight (b) .note (c) #top (d) center
9.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS
10.🖌️ How big is the text, in px?
li {
  text-align: center;
  color: green;
  font-size: 20px;
  background-color: orange;
}
11.🖌️ What colour are the letters?
h1 {
  text-align: left;
  color: green;
  background-color: white;
  font-size: 36px;
} (a) green (b) orange (c) white
12.True or false: CSS changes the text size. (a) True (b) False
13.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) white (c) red (d) yellow
14.Which of these does JavaScript do? (a) counts down a timer (b) makes headings and lists (c) rounds box corners (d) makes a form box
15.🖌️ How big is the text, in px?
h1 {
  background-color: green;
  text-align: center;
  font-size: 16px;
  color: orange;
}
16.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 260px;
  justify-content: center;
}
Inside are 2 boxes, each 50px wide (no margins).
17.🌈 In #00f600 the green part is the hex number f6. What is it as a normal number?
18.⚖️ What colour is the text of this element?
<p class="red" id="end">Hi</p>
CSS:
#end { color: orange; }
.red { color: red; } (a) red (b) orange (c) white (d) black
19.Which of these is the border? (a) the gap round content (b) space outside the border (c) space inside the border (d) the line round the box
20.🌈 Which colour is #00ff00? (a) red (b) yellow (c) blue (d) bright green
21.🔍 Which is the odd one out? (a) makes a form box (b) changes the page live (c) makes headings and lists (d) makes a link
22.⚖️ What colour is the text of this element?
<p class="big" id="logo">Hi</p>
CSS:
p { color: yellow; }
#logo { color: black; } (a) yellow (b) green (c) red (d) black
23.⚖️ What colour is the text of this element?
<h1 class="big" id="main">Hi</h1>
CSS:
#main { color: orange; }
h1 { color: green; }
.big { color: yellow; } (a) orange (b) red (c) yellow (d) green
24.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 100px wide (no margins).
25.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 220px;
  padding: 5px;
  border: 5px solid black;
  margin: 15px;
}
26.🖌️ Where does the text sit on its line?
li {
  font-size: 20px;
  color: green;
  text-align: right;
  background-color: white;
} (a) in the middle (b) on the left (c) on the right
27.🌈 In #007a00 the green part is the hex number 7a. What is it as a normal number?
28.🖌️ How big is the text, in px?
h1 {
  background-color: red;
  font-size: 12px;
  text-align: left;
  color: blue;
}
29.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
30.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) black (d) green
31.✍️ Which property is set to 300px in this rule?
h1 {
font-weight: bold;
width: 300px;
} (a) font-style (b) width (c) color (d) 300px
32.🌈 Which colour is rgb(255, 255, 255)? (a) bright green (b) white (c) blue (d) red
33.🖌️ Where does the text sit on its line?
p {
  text-align: left;
  font-size: 28px;
  background-color: white;
  color: red;
} (a) on the right (b) in the middle (c) on the left
34.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) [ ] (d) < >
35.✍️ What value is given to text-align in this rule?
body {
  text-align: center;
  color: red;
  margin: 10px;
} (a) 10px (b) center (c) text-align (d) yellow
36.✍️ What is the selector in this CSS rule?
h2 {
color: red;
font-weight: bold;
} (a) h1 (b) h2 (c) bold (d) color
37.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
38.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 260px;
  justify-content: center;
}
Inside are 2 boxes, each 80px wide (no margins).
39.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
40.🖌️ What colour is behind the letters?
li {
  text-align: right;
  background-color: blue;
  font-size: 36px;
  color: green;
} (a) black (b) blue (c) green

Answer key

.
the screen width
an element selector
JavaScript
h2
24
padding
.note
JavaScript
20
green
True
cyan
counts down a timer
16
80
246
orange
the line round the box
bright green
changes the page live
black
orange
10
270
on the right
122
12
No
red
width
white
on the left
{ }
center
h2
an id selector
50
600px or narrower
blue

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