CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 18 · 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 HTML do? (a) shows a pop-up message (b) changes the page live (c) reacts to a button click (d) puts a picture on a page
2.🌈 Which colour is #00ff00? (a) black (b) yellow (c) cyan (d) bright green
3.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Creative Sheet System (d) Cascading Style Sheets
4.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
5.💪 Which flexbox property sets space between boxes? (a) align-items (b) gap (c) flex-direction (d) display: flex
6.✍️ Which property is set to center in this rule?
p {
  text-align: center;
  padding: 8px;
  margin: 10px;
} (a) margin (b) center (c) text-align (d) background-color
7.✍️ What value is given to font-size in this rule?
h2 {
font-size: 20px;
font-style: italic;
} (a) font-size (b) center (c) yellow (d) 20px
8.📱 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;
  }
}
9.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
10.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 768px) {
  p {
    font-size: 20px;
  }
}
11.✍️ What is the selector in this CSS rule?
body {
width: 300px;
padding: 8px;
} (a) body (b) width (c) .box (d) 8px
12.What does font-size do? (a) makes letters bigger (b) makes the text bold (c) colours behind the text (d) centres a heading
13.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
}
14.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) fits every screen (d) never changes
15.🌈 Which hex code is magenta? (a) #ff00ff (b) #00ff00 (c) #0000ff (d) #ffffff
16.🔍 Which is the odd one out? (a) lays out the page (b) gives the page structure (c) sets colours and fonts (d) adds space around boxes
17.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 768px) {
  p {
    font-size: 22px;
  }
}
18.Which of these does JavaScript do? (a) gives the page structure (b) lays out the page (c) shows a pop-up message (d) puts a picture on a page
19.🎯 Can many elements share the same class? (a) Yes (b) No
20.✍️ What value is given to width in this rule?
.note {
width: 300px;
text-align: center;
} (a) italic (b) red (c) 300px (d) width
21.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript
22.🖌️ Which CSS property centres a heading? (a) font-size (b) text-align (c) color (d) background-color
23.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 270px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 100px wide (no margins).
24.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) padding (d) border
25.🔍 Which is the odd one out? (a) makes headings and lists (b) gives the page structure (c) checks a quiz answer (d) puts a picture on a page
26.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
  border: 2px solid;
  text-align: center;
  font-weight: bold;
}
27.📦 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: 20px;
  border: 1px solid black;
  margin: 10px;
}
28.⚖️ What colour is the text of this element?
<h2 class="menu" id="end">Hi</h2>
CSS:
h2 { color: blue; }
#end { color: black; }
.menu { color: green; } (a) green (b) orange (c) blue (d) black
29.🖌️ What colour are the letters?
li {
  text-align: right;
  background-color: orange;
  color: green;
  font-size: 40px;
} (a) yellow (b) orange (c) green
30.🎯 Which sign starts a class selector? (a) . (b) & (c) # (d) @
31.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
32.🖌️ What colour is behind the letters?
p {
  text-align: left;
  color: white;
  background-color: red;
  font-size: 20px;
} (a) green (b) white (c) red
33.Which of these is the content? (a) the gap round content (b) the text or picture (c) space inside the border (d) the gap to other boxes
34.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
font-style: italic;
font-size: 20px;
}
35.🌈 Which colour is #ff0000? (a) bright green (b) black (c) white (d) red
36.⚖️ What colour is the text of this element?
<p class="box" id="main">Hi</p>
CSS:
p { color: orange; }
.box { color: white; }
#main { color: yellow; } (a) black (b) white (c) orange (d) yellow
37.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-size (c) background-color (d) color
38.🖌️ Which CSS property colours behind the text? (a) font-family (b) font-weight (c) font-size (d) background-color
39.🌈 Which colour is #ffffff? (a) white (b) blue (c) magenta (d) bright green
40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
}

Answer key

puts a picture on a page
bright green
Cascading Style Sheets
center
gap
text-align
20px
16
600px or narrower
20
body
makes letters bigger
12
fits every screen
#ff00ff
gives the page structure
22
shows a pop-up message
Yes
300px
CSS
text-align
70
padding
checks a quiz answer
3
272
black
green
.
the later one
red
the text or picture
2
red
yellow
font-weight
background-color
white
14

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