CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 453 · 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.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) makes the text bold
2.⚖️ What colour is the text of this element?
<p class="red" id="top">Hi</p>
CSS:
#top { color: blue; }
#top { color: green; } (a) black (b) red (c) blue (d) green
3.⚖️ What colour is the text of this element?
<p class="box" id="hero">Hi</p>
CSS:
.box { color: blue; }
.box { color: red; } (a) red (b) blue (c) purple (d) orange
4.True or false: margin is space outside the border. (a) True (b) False
5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 50px;
  padding: 10px;
  border: 3px solid black;
  margin: 15px;
}
6.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
color: red;
}
7.What does font-size do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) sets the letter colour
8.🎯 Can many elements share the same class? (a) Yes (b) No
9.🌈 Which hex code is bright green? (a) #ffffff (b) #00ff00 (c) #ff00ff (d) #ff0000
10.What does text-align do? (a) makes letters bigger (b) sets the letter colour (c) centres a heading (d) picks the font style
11.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
12.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 310px;
  justify-content: flex-end;
}
Inside are 3 boxes, each 80px wide (no margins).
13.🌈 In #004d00 the green part is the hex number 4d. What is it as a normal number?
14.🌈 Which colour of light is strongest in rgb(49, 116, 208)? (a) red (b) green (c) blue
15.True or false: .card is a class selector. (a) False (b) True
16.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 100px;
  padding: 30px;
  border: 2px solid black;
  margin: 5px;
}
17.✍️ How many declarations (property: value pairs) are in this rule?
.box {
  margin: 10px;
  font-size: 20px;
  border: 2px solid;
  width: 300px;
}
18.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
19.✍️ What is the selector in this CSS rule?
#top {
  font-size: 20px;
  text-align: center;
  background-color: yellow;
  font-style: italic;
} (a) li (b) #top (c) center (d) font-size
20.🌈 Which colour is rgb(0, 0, 0)? (a) blue (b) yellow (c) black (d) magenta
21.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
  color: red;
  margin: 10px;
  padding: 8px;
}
22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 190px;
  padding: 15px;
  border: 1px solid black;
  margin: 0px;
}
23.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 240px;
  padding: 5px;
  border: 1px solid black;
  margin: 10px;
}
24.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) display: flex (c) gap (d) justify-content
25.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
} (a) Yes (b) No
26.✍️ What value is given to margin in this rule?
.box {
  font-size: 20px;
  background-color: yellow;
  margin: 10px;
  font-weight: bold;
} (a) margin (b) 8px (c) 10px (d) bold
27.What does justify-content: center 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
28.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
29.🔍 Which is the odd one out? (a) adds space around boxes (b) puts a picture on a page (c) changes the text size (d) sets colours and fonts
30.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
31.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 40px;
  padding: 25px;
  border: 2px solid black;
  margin: 0px;
}
32.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 8px;
  }
}
33.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) gap (d) display: flex
34.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <style> (d) <css>
35.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-size (c) background-color (d) color
36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
}
37.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 160px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}
38.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 410px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 100px wide (no margins).
39.🎯 Which CSS selector matches this element?
<h1 class="note" id="end">Hello</h1> (a) .big (b) .end (c) h1 (d) #hero
40.🎯 Which CSS selector matches this element?
<span class="big" id="top">Hello</span> (a) .red (b) .top (c) span (d) p

Answer key

colours behind the text
green
red
True
76
1
makes letters bigger
Yes
#00ff00
centres a heading
CSS
70
77
blue
True
174
4
a class selector
#top
black
3
222
272
justify-content
Yes
10px
puts boxes in the middle
No
puts a picture on a page
color
94
8
flex-direction
<style>
color
10
224
10
h1
span

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