CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 716 · 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 is the odd one out? (a) puts a picture on a page (b) gives the page structure (c) makes a link (d) checks a quiz answer
2.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
}
3.🖌️ What colour are the letters?
li {
  background-color: black;
  text-align: center;
  font-size: 20px;
  color: orange;
} (a) orange (b) yellow (c) black
4.🌈 Which colour of light is strongest in rgb(15, 178, 87)? (a) green (b) blue (c) red
5.✍️ What value is given to background-color in this rule?
p {
padding: 8px;
background-color: yellow;
} (a) 10px (b) 8px (c) background-color (d) yellow
6.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 6 (d) 4
7.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) green (d) red
8.⚖️ What colour is the text of this element?
<h1 class="menu" id="logo">Hi</h1>
CSS:
h1 { color: yellow; }
.menu { color: blue; }
#logo { color: orange; } (a) purple (b) yellow (c) orange (d) blue
9.✍️ What value is given to color in this rule?
h1 {
  font-size: 20px;
  color: red;
  text-align: center;
  background-color: yellow;
} (a) center (b) 20px (c) red (d) color
10.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
font-weight: bold;
border: 2px solid;
}
11.🖌️ Which CSS property makes the text bold? (a) font-weight (b) text-align (c) font-size (d) font-family
12.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 768px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
13.🖌️ Which CSS property makes letters bigger? (a) color (b) font-weight (c) text-align (d) font-size
14.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) : (d) ;
15.✍️ Which property is set to 10px in this rule?
li {
margin: 10px;
width: 300px;
} (a) margin (b) 10px (c) padding (d) font-weight
16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 100px;
  padding: 30px;
  border: 4px solid black;
  margin: 0px;
}
17.True or false: margin is the text or picture. (a) True (b) False
18.✍️ What is the selector in this CSS rule?
h2 {
  text-align: center;
  font-weight: bold;
  background-color: yellow;
} (a) h2 (b) bold (c) h1 (d) text-align
19.True or false: the content is the text or picture. (a) False (b) True
20.True or false: margin is a solid or dotted edge. (a) False (b) True
21.✍️ What is the selector in this CSS rule?
p {
  text-align: center;
  width: 300px;
  background-color: yellow;
  padding: 8px;
} (a) text-align (b) .note (c) p (d) 300px
22.True or false: p is an element selector. (a) False (b) True
23.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
24.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) the text or picture (d) the gap round content
25.⚖️ What colour is the text of this element?
<h2 class="note" id="intro">Hi</h2>
CSS:
#intro { color: white; }
h2 { color: blue; }
.note { color: black; } (a) blue (b) black (c) red (d) white
26.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 240px;
  justify-content: center;
}
Inside are 4 boxes, each 50px wide (no margins).
27.Which of these is the border? (a) the gap round content (b) the gap to other boxes (c) space inside the border (d) a solid or dotted edge
28.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 6px;
  }
}
29.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
30.🖌️ What colour is behind the letters?
p {
  background-color: red;
  color: green;
  font-size: 28px;
  text-align: left;
} (a) green (b) red (c) orange
31.True or false: .star is an id selector. (a) False (b) True
32.⚖️ What colour is the text of this element?
<h1 class="box" id="intro">Hi</h1>
CSS:
.box { color: blue; }
h1 { color: white; } (a) orange (b) white (c) red (d) blue
33.⚖️ What colour is the text of this element?
<h1 class="note" id="top">Hi</h1>
CSS:
.note { color: orange; }
#top { color: green; }
h1 { color: white; } (a) orange (b) red (c) white (d) green
34.✍️ Which property is set to 10px in this rule?
li {
  margin: 10px;
  color: red;
  font-weight: bold;
  font-size: 20px;
} (a) font-weight (b) margin (c) 10px (d) padding
35.🖌️ Which CSS property centres a heading? (a) text-align (b) font-family (c) background-color (d) font-size
36.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
37.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 20px;
  }
}
38.True or false: CSS gives the page structure. (a) True (b) False
39.🖌️ Which CSS property colours behind the text? (a) color (b) font-family (c) background-color (d) font-weight
40.✍️ What is the selector in this CSS rule?
h2 {
  color: red;
  font-size: 20px;
  border: 2px solid;
  width: 300px;
} (a) h1 (b) h2 (c) 20px (d) color

Answer key

checks a quiz answer
10
orange
green
yellow
3
blue
orange
red
2
font-weight
No
font-size
;
margin
168
False
h2
True
False
p
True
an id selector
the text or picture
white
20
a solid or dotted edge
12
CSS
red
False
blue
green
margin
text-align
color
20
False
background-color
h2

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