CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 558 · 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 does JavaScript do? (a) counts down a timer (b) makes a link (c) rounds box corners (d) sets colours and fonts
2.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 350px;
  justify-content: space-between;
}
Inside are 4 boxes, each 80px wide (no margins).
3.✍️ How does a CSS comment start? (a) # (b) // (c) /* (d) <!--
4.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) center (d) flex-end
5.✍️ What value is given to text-align in this rule?
.note {
  text-align: center;
  margin: 10px;
  color: red;
} (a) yellow (b) text-align (c) 10px (d) center
6.🌈 Which colour is rgb(255, 0, 0)? (a) white (b) black (c) red (d) yellow
7.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 240px;
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
}
8.🎯 Which element does the selector .star style? (a) <div class="note"> (b) <li id="star"> (c) <li class="star"> (d) <li class="menu">
9.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
10.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) = (d) :
11.✍️ What value is given to font-size in this rule?
#top {
  border: 2px solid;
  font-size: 20px;
  font-weight: bold;
} (a) font-size (b) center (c) yellow (d) 20px
12.🖌️ What colour is behind the letters?
p {
  font-size: 40px;
  background-color: purple;
  color: white;
  text-align: left;
} (a) white (b) blue (c) purple
13.True or false: HTML makes a form box. (a) False (b) True
14.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
}
15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 8px;
  }
}
16.🌈 Which colour is #000000? (a) white (b) black (c) bright green (d) red
17.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 20px;
  border: 4px solid black;
  margin: 20px;
}
18.🌈 Which colour of light is strongest in rgb(53, 253, 54)? (a) green (b) blue (c) red
19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
}
20.🖌️ What colour are the letters?
p {
  text-align: right;
  color: purple;
  background-color: green;
  font-size: 16px;
} (a) green (b) orange (c) purple
21.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 250px;
  justify-content: center;
}
Inside are 3 boxes, each 50px wide (no margins).
22.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
23.🌈 Which colour is #0000ff? (a) cyan (b) white (c) black (d) blue
24.🖌️ What colour is behind the letters?
p {
  background-color: black;
  font-size: 32px;
  color: purple;
  text-align: center;
} (a) blue (b) black (c) purple
25.🌈 Which colour of light is strongest in rgb(13, 220, 124)? (a) blue (b) red (c) green
26.⚖️ What colour is the text of this element?
<h2 class="big" id="end">Hi</h2>
CSS:
.big { color: purple; }
.big { color: yellow; } (a) red (b) yellow (c) orange (d) purple
27.True or false: #logo is a class selector. (a) True (b) False
28.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
29.Which of these does HTML do? (a) makes a link (b) sets colours and fonts (c) changes the page live (d) lays out the page
30.✍️ How many declarations (property: value pairs) are in this rule?
.box {
  font-weight: bold;
  border: 2px solid;
  background-color: yellow;
}
31.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 130px;
  padding: 10px;
  border: 5px solid black;
  margin: 0px;
}
32.🖌️ What colour are the letters?
h2 {
  color: red;
  font-size: 28px;
  background-color: orange;
  text-align: right;
} (a) orange (b) blue (c) red
33.🌈 Which colour of light is strongest in rgb(36, 1, 178)? (a) red (b) green (c) blue
34.True or false: padding is space inside the border. (a) True (b) False
35.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
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 wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 210px;
  padding: 5px;
  border: 2px solid black;
  margin: 5px;
}
38.🎯 Which CSS selector matches this element?
<li class="menu" id="hero">Hello</li> (a) #top (b) #hero (c) .hero (d) #menu
39.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 100px;
  padding: 15px;
  border: 4px solid black;
  margin: 15px;
}
40.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 8px;
  }
}

Answer key

counts down a timer
10
/*
space-between
center
red
262
<li class="star">
the later one
:
20px
purple
True
12
8
black
168
green
22
purple
50
1
blue
black
green
yellow
False
No
makes a link
3
160
red
blue
True
puts boxes in the middle
10
224
#hero
168
12

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