CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 396 · 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: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 6px;
  }
}
2.🌈 Which colour of light is strongest in rgb(162, 127, 132)? (a) red (b) blue (c) green
3.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) font-family (d) background-color
4.🖌️ What colour are the letters?
h1 {
  font-size: 32px;
  text-align: left;
  color: red;
  background-color: purple;
} (a) red (b) purple (c) black
5.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 28px;
  }
} (a) No (b) Yes
6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 180px;
  padding: 30px;
  border: 5px solid black;
  margin: 10px;
}
7.🖌️ Where does the text sit on its line?
h2 {
  font-size: 36px;
  background-color: purple;
  text-align: center;
  color: red;
} (a) on the left (b) in the middle (c) on the right
8.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
9.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 8px;
  }
}
10.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
}
11.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}
12.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
13.✍️ What value is given to color in this rule?
#top {
color: red;
font-style: italic;
} (a) color (b) red (c) center (d) 20px
14.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) border (c) content (d) margin
15.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) margin (d) border
16.True or false: the content is space inside the border. (a) True (b) False
17.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 6px;
  }
}
18.✍️ What value is given to font-size in this rule?
body {
border: 2px solid;
font-size: 20px;
} (a) font-size (b) center (c) 20px (d) yellow
19.True or false: CSS lays out the page. (a) True (b) False
20.Which of these does HTML do? (a) sets colours and fonts (b) checks a quiz answer (c) changes the text size (d) makes headings and lists
21.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
22.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
23.Which of these does JavaScript do? (a) adds space around boxes (b) lays out the page (c) reacts to a button click (d) sets colours and fonts
24.True or false: p is an id selector. (a) True (b) False
25.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 1024px) {
  p {
    font-size: 26px;
  }
}
26.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 32px;
  }
} (a) Yes (b) No
27.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
28.⚖️ What colour is the text of this element?
<p class="red" id="end">Hi</p>
CSS:
.red { color: red; }
#end { color: purple; }
p { color: green; } (a) red (b) green (c) black (d) purple
29.🌈 Which colour of light is strongest in rgb(48, 109, 197)? (a) red (b) green (c) blue
30.🖌️ Where does the text sit on its line?
li {
  color: purple;
  text-align: right;
  background-color: black;
  font-size: 20px;
} (a) on the left (b) in the middle (c) on the right
31.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) flex-end (d) center
32.🖌️ What colour is behind the letters?
h2 {
  color: red;
  text-align: center;
  background-color: yellow;
  font-size: 12px;
} (a) red (b) white (c) yellow
33.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 180px;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
34.✍️ What value is given to border in this rule?
h1 {
color: red;
border: 2px solid;
} (a) 2px solid (b) border (c) 300px (d) italic
35.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 20px;
  }
} (a) Yes (b) No
36.🎯 Which CSS selector matches this element?
<span class="star" id="top">Hello</span> (a) #top (b) #intro (c) #star (d) .top
37.✍️ How many declarations (property: value pairs) are in this rule?
p {
  background-color: yellow;
  width: 300px;
  color: red;
  border: 2px solid;
}
38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 480px) {
  p {
    font-size: 12px;
  }
}
39.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
40.🎯 What kind of selector is h1? (a) a class selector (b) an id selector (c) an element selector

Answer key

12
red
color
red
Yes
250
in the middle
an id selector
8
16
190
F
red
border
border
False
6
20px
True
makes headings and lists
1
puts boxes in the middle
reacts to a button click
False
20
No
CSS
purple
blue
on the right
flex-start
yellow
202
2px solid
Yes
#top
4
16
HTML
an element selector

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