CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 73 · 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.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 24px;
  }
}
2.🎯 Which CSS selector matches this element?
<h2 class="box" id="main">Hello</h2> (a) li (b) .star (c) #logo (d) .box
3.🌈 Which hex code is yellow? (a) #0000ff (b) #000000 (c) #ff0000 (d) #ffff00
4.Which of these is the border? (a) space outside the border (b) space inside the border (c) the text or picture (d) the line round the box
5.✍️ What value is given to width in this rule?
.note {
  margin: 10px;
  text-align: center;
  width: 300px;
} (a) italic (b) red (c) 300px (d) width
6.⚖️ What colour is the text of this element?
<h1 class="big" id="end">Hi</h1>
CSS:
.big { color: red; }
.big { color: blue; } (a) blue (b) red (c) white (d) orange
7.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
8.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) the gap to other boxes (d) the line round the box
9.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) ( ) (d) [ ]
10.✍️ What value is given to font-style in this rule?
h2 {
  border: 2px solid;
  text-align: center;
  font-weight: bold;
  font-style: italic;
} (a) 20px (b) font-style (c) red (d) italic
11.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
12.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-start;
}
Inside are 4 boxes, each 40px wide (no margins).
13.🖌️ What colour are the letters?
p {
  background-color: orange;
  font-size: 40px;
  color: black;
  text-align: left;
} (a) yellow (b) orange (c) black
14.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 220px;
  padding: 5px;
  border: 2px solid black;
  margin: 20px;
}
15.⚖️ What colour is the text of this element?
<h1 class="box" id="logo">Hi</h1>
CSS:
.box { color: red; }
h1 { color: yellow; }
#logo { color: purple; } (a) red (b) yellow (c) white (d) purple
16.What does text-align do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) centres a heading
17.🎯 Which CSS selector matches this element?
<h1 class="box" id="end">Hello</h1> (a) .star (b) .box (c) #box (d) #hero
18.🌈 Which colour of light is strongest in rgb(20, 174, 27)? (a) green (b) blue (c) red
19.Which of these is margin? (a) a solid or dotted edge (b) the gap round content (c) space outside the border (d) space inside the border
20.True or false: margin is the gap round content. (a) True (b) False
21.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) bright green (c) yellow (d) red
22.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) flex-end (d) center
23.🖌️ Which CSS property sets the letter colour? (a) color (b) font-weight (c) font-size (d) text-align
24.📦 In the box model, which part is the line round the box? (a) content (b) margin (c) padding (d) border
25.⚖️ What colour is the text of this element?
<h1 class="red" id="top">Hi</h1>
CSS:
.red { color: red; }
.red { color: blue; } (a) red (b) black (c) blue (d) green
26.🖌️ What colour is behind the letters?
h2 {
  text-align: center;
  font-size: 16px;
  background-color: yellow;
  color: blue;
} (a) yellow (b) red (c) blue
27.🌈 Which colour is #0000ff? (a) yellow (b) red (c) blue (d) bright green
28.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
29.⚖️ What colour is the text of this element?
<p class="big" id="top">Hi</p>
CSS:
.big { color: blue; }
p { color: orange; }
#top { color: black; } (a) blue (b) orange (c) red (d) black
30.🌈 Which colour is rgb(0, 0, 255)? (a) blue (b) red (c) white (d) cyan
31.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 340px;
  justify-content: space-between;
}
Inside are 3 boxes, each 100px wide (no margins).
32.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
margin: 10px;
width: 300px;
}
33.🖌️ What colour are the letters?
h1 {
  background-color: green;
  text-align: center;
  color: red;
  font-size: 32px;
} (a) purple (b) green (c) red
34.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) F (d) G
35.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
36.⚖️ What colour is the text of this element?
<h1 class="big" id="logo">Hi</h1>
CSS:
h1 { color: orange; }
h1 { color: purple; } (a) white (b) purple (c) yellow (d) orange
37.🖌️ What colour are the letters?
p {
  color: white;
  background-color: green;
  text-align: center;
  font-size: 40px;
} (a) purple (b) green (c) white
38.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
39.✍️ What value is given to border in this rule?
body {
  border: 2px solid;
  background-color: yellow;
  font-size: 20px;
} (a) 2px solid (b) border (c) italic (d) 300px
40.🎯 Which CSS selector matches this element?
<li class="box" id="logo">Hello</li> (a) .star (b) #box (c) #end (d) li

Answer key

24
.box
#ffff00
the line round the box
300px
blue
No
the gap to other boxes
{ }
italic
fits every screen
50
black
274
purple
centres a heading
.box
green
space outside the border
False
red
center
color
border
blue
yellow
blue
puts boxes in the middle
black
blue
20
2
red
F
a class selector
purple
white
an id selector
2px solid
li

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