CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 649 · 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.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 140px;
  padding: 10px;
  border: 2px solid black;
  margin: 10px;
}
2.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
3.🌈 Which hex code is red? (a) #0000ff (b) #ff0000 (c) #ffff00 (d) #00ff00
4.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
5.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 340px;
  justify-content: space-between;
}
Inside are 3 boxes, each 80px wide (no margins).
6.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
7.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
8.🎯 How many elements on a page should have the same id? (a) 1 (b) 5 (c) 2 (d) any number
9.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) alt (d) style
10.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 14px;
  }
} (a) Yes (b) No
11.✍️ What is the selector in this CSS rule?
body {
  width: 300px;
  background-color: yellow;
  padding: 8px;
  font-size: 20px;
} (a) width (b) yellow (c) body (d) .box
12.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 230px;
  justify-content: space-between;
}
Inside are 4 boxes, each 50px wide (no margins).
13.🎯 Which CSS selector matches this element?
<p class="note" id="hero">Hello</p> (a) .big (b) .hero (c) #note (d) p
14.🌈 Which colour of light is strongest in rgb(135, 125, 176)? (a) red (b) blue (c) green
15.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) bright green (c) red (d) blue
16.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 768px) {
  p {
    font-size: 24px;
  }
}
17.True or false: JavaScript rounds box corners. (a) True (b) False
18.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 120px;
  padding: 30px;
  border: 3px solid black;
  margin: 15px;
}
19.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) black (d) green
20.⚖️ What colour is the text of this element?
<p class="red" id="top">Hi</p>
CSS:
#top { color: green; }
.red { color: black; }
p { color: red; } (a) green (b) black (c) red (d) white
21.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
22.What does justify-content: space-between do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
23.🔍 Which is the odd one out? (a) makes a link (b) makes a form box (c) puts a picture on a page (d) changes the page live
24.Which of these is padding? (a) the gap to other boxes (b) space outside the border (c) the line round the box (d) the gap round content
25.Which of these does HTML do? (a) sets colours and fonts (b) makes a link (c) lays out the page (d) checks a quiz answer
26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
}
27.🖌️ What colour are the letters?
h2 {
  background-color: green;
  text-align: right;
  font-size: 40px;
  color: white;
} (a) blue (b) green (c) white
28.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
29.🖌️ What colour are the letters?
li {
  font-size: 32px;
  text-align: left;
  background-color: white;
  color: yellow;
} (a) white (b) red (c) yellow
30.True or false: the content is a solid or dotted edge. (a) True (b) False
31.Which of these does CSS do? (a) makes a form box (b) puts a picture on a page (c) sets colours and fonts (d) checks a quiz answer
32.Which of these is the border? (a) the line round the box (b) the text or picture (c) space outside the border (d) the gap to other boxes
33.⚖️ What colour is the text of this element?
<h1 class="star" id="main">Hi</h1>
CSS:
.star { color: yellow; }
h1 { color: blue; }
#main { color: white; } (a) black (b) blue (c) white (d) yellow
34.True or false: JavaScript makes headings and lists. (a) True (b) False
35.⚖️ What colour is the text of this element?
<p class="big" id="end">Hi</p>
CSS:
.big { color: white; }
#end { color: black; }
p { color: purple; } (a) blue (b) black (c) purple (d) white
36.⚖️ What colour is the text of this element?
<p class="menu" id="logo">Hi</p>
CSS:
p { color: yellow; }
p { color: blue; } (a) yellow (b) orange (c) purple (d) blue
37.⚖️ What colour is the text of this element?
<h1 class="box" id="intro">Hi</h1>
CSS:
h1 { color: red; }
#intro { color: green; } (a) red (b) black (c) yellow (d) green
38.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
39.📦 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: 30px;
  border: 4px solid black;
  margin: 10px;
}
40.True or false: JavaScript changes the page live. (a) True (b) False

Answer key

184
an id selector
#ff0000
;
50
an element selector
an element selector
1
style
Yes
body
10
p
blue
bright green
20
False
216
red
green
{ }
equal gaps, none at ends
changes the page live
the gap round content
makes a link
10
white
CSS
yellow
False
sets colours and fonts
the line round the box
white
False
black
blue
green
No
118
True

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