CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 691 · 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 a media query check? (a) the battery level (b) the page title (c) the time of day (d) the screen width
2.🎯 Which element does the selector .menu style? (a) <span class="note"> (b) <span class="menu"> (c) <p class="big"> (d) <span id="menu">
3.⚖️ What colour is the text of this element?
<h2 class="star" id="intro">Hi</h2>
CSS:
h2 { color: white; }
.star { color: black; } (a) white (b) red (c) blue (d) black
4.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
5.Which of these is the border? (a) the line round the box (b) the gap round content (c) the text or picture (d) space inside the border
6.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .js (d) .css
7.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
8.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 22px;
  }
}
9.What does justify-content: space-between do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
10.⚖️ What colour is the text of this element?
<h2 class="box" id="hero">Hi</h2>
CSS:
.box { color: orange; }
.box { color: red; } (a) green (b) orange (c) black (d) red
11.✍️ How many declarations (property: value pairs) are in this rule?
.note {
font-size: 20px;
}
12.✍️ What is the selector in this CSS rule?
h1 {
  padding: 8px;
  font-size: 20px;
  margin: 10px;
} (a) padding (b) p (c) h1 (d) 20px
13.🖌️ How big is the text, in px?
h1 {
  font-size: 28px;
  background-color: red;
  color: white;
  text-align: center;
}
14.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
  border: 2px solid;
  padding: 8px;
  font-weight: bold;
  color: red;
}
15.🖌️ What colour are the letters?
h1 {
  text-align: right;
  font-size: 28px;
  color: red;
  background-color: black;
} (a) white (b) red (c) black
16.True or false: HTML changes the text size. (a) True (b) False
17.Which of these is the content? (a) the line round the box (b) the text or picture (c) the gap to other boxes (d) space inside the border
18.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 255 (d) 1000
19.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 6px;
  }
}
20.🖌️ What colour is behind the letters?
h1 {
  background-color: black;
  color: purple;
  text-align: left;
  font-size: 16px;
} (a) purple (b) green (c) black
21.⚖️ What colour is the text of this element?
<p class="red" id="top">Hi</p>
CSS:
.red { color: black; }
#top { color: red; } (a) purple (b) white (c) red (d) black
22.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) font-size (d) color
23.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) display: flex (d) justify-content
24.🌈 In #009900 the green part is the hex number 99. What is it as a normal number?
25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
26.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
padding: 8px;
}
27.🎯 What kind of selector is .card? (a) a class selector (b) an id selector (c) an element selector
28.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 768px) {
  p {
    font-size: 14px;
  }
}
29.🖌️ What colour is behind the letters?
h2 {
  color: white;
  background-color: orange;
  text-align: right;
  font-size: 12px;
} (a) white (b) orange (c) blue
30.What does font-family do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) picks the font style
31.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 14px;
  }
}
32.⚖️ What colour is the text of this element?
<p class="big" id="hero">Hi</p>
CSS:
p { color: orange; }
p { color: black; } (a) purple (b) orange (c) yellow (d) black
33.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 260px;
  justify-content: center;
}
Inside are 4 boxes, each 50px wide (no margins).
34.True or false: the content is space inside the border. (a) True (b) False
35.✍️ What value is given to font-style in this rule?
.note {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  border: 2px solid;
} (a) 20px (b) red (c) italic (d) font-style
36.🎯 Can many elements share the same class? (a) No (b) Yes
37.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 15px;
  border: 1px solid black;
  margin: 5px;
}
38.🌈 Which colour is #ffff00? (a) yellow (b) cyan (c) white (d) magenta
39.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 768px) {
  p {
    font-size: 12px;
  }
} (a) No (b) Yes
40.⚖️ What colour is the text of this element?
<h1 class="star" id="top">Hi</h1>
CSS:
#top { color: blue; }
#top { color: purple; } (a) purple (b) red (c) white (d) blue

Answer key

the screen width
<span class="menu">
black
style
the line round the box
.css
red
24
equal gaps, none at ends
red
1
h1
28
4
red
False
the text or picture
255
6
black
red
font-weight
display: flex
153
the later one
1
a class selector
14
orange
picks the font style
12
black
30
False
italic
Yes
212
yellow
Yes
purple

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