CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 225 · 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 of these is the border? (a) the line round the box (b) the gap to other boxes (c) space outside the border (d) the gap round content
2.🎯 Which CSS selector matches this element?
<div class="star" id="main">Hello</div> (a) span (b) div (c) #logo (d) .main
3.True or false: .note is an element selector. (a) True (b) False
4.True or false: .card is a class selector. (a) False (b) True
5.⚖️ What colour is the text of this element?
<p class="box" id="intro">Hi</p>
CSS:
#intro { color: blue; }
#intro { color: purple; } (a) green (b) purple (c) blue (d) black
6.True or false: HTML gives the page structure. (a) True (b) False
7.🌈 Which colour is #000000? (a) white (b) cyan (c) black (d) magenta
8.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) padding (d) content
9.🌈 In #003200 the green part is the hex number 32. What is it as a normal number?
10.✍️ Which sign goes between a property and its value? (a) - (b) : (c) = (d) ;
11.⚖️ What colour is the text of this element?
<h2 class="big" id="logo">Hi</h2>
CSS:
.big { color: blue; }
h2 { color: yellow; } (a) black (b) yellow (c) red (d) blue
12.🌈 Which colour is #ff0000? (a) white (b) cyan (c) magenta (d) red
13.🖌️ How big is the text, in px?
li {
  text-align: left;
  background-color: white;
  font-size: 36px;
  color: yellow;
}
14.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
15.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 480px;
  justify-content: space-between;
}
Inside are 4 boxes, each 60px wide (no margins).
16.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) display: flex (d) align-items
17.⚖️ What colour is the text of this element?
<h1 class="note" id="logo">Hi</h1>
CSS:
#logo { color: white; }
#logo { color: black; } (a) black (b) yellow (c) orange (d) white
18.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 250px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 60px wide (no margins).
19.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 10px;
  border: 1px solid black;
  margin: 0px;
}
20.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) red (c) cyan (d) magenta
21.🌈 Which colour is #ffffff? (a) red (b) white (c) magenta (d) bright green
22.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
23.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 20px;
  }
}
24.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
25.🖌️ What colour is behind the letters?
h1 {
  color: red;
  font-size: 28px;
  background-color: green;
  text-align: left;
} (a) green (b) red (c) orange
26.🌈 Which hex code is yellow? (a) #0000ff (b) #ffffff (c) #00ff00 (d) #ffff00
27.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 160px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
}
28.Which of these is padding? (a) the line round the box (b) the gap round content (c) the text or picture (d) space outside the border
29.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
30.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
31.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 80px;
  padding: 5px;
  border: 4px solid black;
  margin: 5px;
}
33.⚖️ What colour is the text of this element?
<h2 class="note" id="main">Hi</h2>
CSS:
h2 { color: orange; }
h2 { color: white; } (a) white (b) orange (c) purple (d) green
34.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 220px;
  justify-content: center;
}
Inside are 3 boxes, each 60px wide (no margins).
35.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 70px;
  padding: 30px;
  border: 2px solid black;
  margin: 10px;
}
36.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 200px;
  justify-content: space-between;
}
Inside are 3 boxes, each 60px wide (no margins).
37.🖌️ What colour are the letters?
h1 {
  text-align: left;
  background-color: black;
  color: purple;
  font-size: 24px;
} (a) black (b) green (c) purple
38.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-start (d) flex-end
39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 480px) {
  p {
    font-size: 18px;
  }
}
40.🖌️ What colour are the letters?
li {
  text-align: right;
  color: black;
  font-size: 36px;
  background-color: yellow;
} (a) yellow (b) black (c) white

Answer key

the line round the box
div
False
True
purple
True
black
margin
50
:
blue
red
36
fits every screen
80
gap
black
70
192
cyan
white
Yes
20
blue
green
#ffff00
214
the gap round content
1
HTML
equal gaps, none at ends
98
white
20
154
10
purple
flex-end
18
black

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