CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 137 · 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.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) J (d) F
2.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 6px;
  }
} (a) Yes (b) No
3.🖌️ Where does the text sit on its line?
p {
  background-color: red;
  color: purple;
  text-align: left;
  font-size: 12px;
} (a) on the right (b) on the left (c) in the middle
4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 160px;
  padding: 25px;
  border: 1px solid black;
  margin: 0px;
}
5.True or false: JavaScript reacts to a button click. (a) False (b) True
6.🌈 In #1e0000 the red part is the hex number 1e. What is it as a normal number?
7.📦 In the box model, which part is the line round the box? (a) content (b) border (c) margin (d) padding
8.True or false: HTML puts a picture on a page. (a) False (b) True
9.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 1000 (c) 100 (d) 99
10.🌈 In #350000 the red part is the hex number 35. What is it as a normal number?
11.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
12.⚖️ What colour is the text of this element?
<h2 class="note" id="logo">Hi</h2>
CSS:
h2 { color: yellow; }
h2 { color: black; } (a) black (b) green (c) white (d) yellow
13.✍️ What is the selector in this CSS rule?
p {
font-weight: bold;
font-size: 20px;
} (a) font-weight (b) 20px (c) .note (d) p
14.🎯 Which element does the selector .big style? (a) <div id="big"> (b) <div class="big"> (c) <span class="box"> (d) <div class="red">
15.Which of these is padding? (a) the gap to other boxes (b) space inside the border (c) space outside the border (d) a solid or dotted edge
16.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 5px;
  border: 1px solid black;
  margin: 10px;
}
17.Which of these does JavaScript do? (a) rounds box corners (b) lays out the page (c) shows a pop-up message (d) adds space around boxes
18.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) colours behind the text (d) makes letters bigger
19.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) = (d) -
20.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
21.✍️ What is the selector in this CSS rule?
h1 {
  font-weight: bold;
  text-align: center;
  border: 2px solid;
} (a) center (b) p (c) font-weight (d) h1
22.🖌️ Which CSS property centres a heading? (a) font-family (b) background-color (c) color (d) text-align
23.⚖️ What colour is the text of this element?
<h1 class="box" id="hero">Hi</h1>
CSS:
#hero { color: black; }
#hero { color: yellow; } (a) black (b) green (c) yellow (d) blue
24.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 120px;
  padding: 5px;
  border: 5px solid black;
  margin: 15px;
}
25.🖌️ Which CSS property sets the letter colour? (a) color (b) font-family (c) font-weight (d) font-size
26.✍️ How many declarations (property: value pairs) are in this rule?
p {
  font-weight: bold;
  background-color: yellow;
  font-style: italic;
  padding: 8px;
}
27.✍️ What is the selector in this CSS rule?
.box {
  font-style: italic;
  padding: 8px;
  background-color: yellow;
  color: red;
} (a) 8px (b) font-style (c) .box (d) h2
28.True or false: CSS puts a picture on a page. (a) False (b) True
29.🎯 Which CSS selector matches this element?
<li class="red" id="intro">Hello</li> (a) .red (b) .intro (c) .box (d) div
30.🖌️ What colour is behind the letters?
h1 {
  font-size: 40px;
  text-align: right;
  color: white;
  background-color: black;
} (a) white (b) yellow (c) black
31.🖌️ Where does the text sit on its line?
h2 {
  text-align: right;
  font-size: 12px;
  color: green;
  background-color: blue;
} (a) in the middle (b) on the left (c) on the right
32.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
}
33.True or false: li is an element selector. (a) False (b) True
34.True or false: JavaScript counts down a timer. (a) False (b) True
35.🖌️ Where does the text sit on its line?
h1 {
  font-size: 16px;
  text-align: right;
  color: blue;
  background-color: white;
} (a) on the right (b) on the left (c) in the middle
36.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 300px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
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: 200px;
  padding: 30px;
  border: 4px solid black;
  margin: 20px;
}
38.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 230px;
  padding: 30px;
  border: 3px solid black;
  margin: 5px;
}
40.⚖️ What colour is the text of this element?
<p class="note" id="logo">Hi</p>
CSS:
p { color: yellow; }
p { color: black; } (a) yellow (b) red (c) green (d) black

Answer key

F
Yes
on the left
212
True
30
border
True
255
53
equal gaps, none at ends
black
p
<div class="big">
space inside the border
142
shows a pop-up message
makes the text bold
:
HTML
h1
text-align
yellow
170
color
4
.box
False
.red
black
on the right
24
True
True
on the right
50
268
800px or wider
296
black

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