CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 148 · 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 colour are the letters?
li {
  color: white;
  font-size: 36px;
  text-align: left;
  background-color: orange;
} (a) white (b) orange (c) green
2.🎯 Which element does the selector #logo style? (a) <h1 id="end"> (b) <h2 class="star"> (c) <h1 id="logo"> (d) <h1 class="logo">
3.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 70px;
  padding: 25px;
  border: 1px solid black;
  margin: 20px;
}
4.True or false: .card is an element selector. (a) True (b) False
5.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 140px;
  padding: 10px;
  border: 4px solid black;
  margin: 10px;
}
6.Which of these does HTML do? (a) shows a pop-up message (b) makes headings and lists (c) rounds box corners (d) reacts to a button click
7.🌈 Which colour of light is strongest in rgb(174, 68, 18)? (a) green (b) red (c) blue
8.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 100px;
  padding: 5px;
  border: 1px solid black;
  margin: 10px;
}
9.✍️ Which property is set to red in this rule?
#top {
color: red;
font-style: italic;
} (a) red (b) color (c) text-align (d) font-size
10.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
11.✍️ Which property is set to bold in this rule?
#top {
  color: red;
  font-weight: bold;
  background-color: yellow;
  text-align: center;
} (a) bold (b) border (c) width (d) font-weight
12.Which of these is the border? (a) space inside the border (b) the line round the box (c) space outside the border (d) the gap to other boxes
13.🔍 Which is the odd one out? (a) gives the page structure (b) changes the text size (c) lays out the page (d) rounds box corners
14.🌈 Which hex code is magenta? (a) #00ff00 (b) #ffffff (c) #ff00ff (d) #0000ff
15.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
16.🖌️ What colour are the letters?
h2 {
  background-color: white;
  font-size: 16px;
  text-align: left;
  color: blue;
} (a) white (b) orange (c) blue
17.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
} (a) No (b) Yes
18.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
19.True or false: the content is the line round the box. (a) True (b) False
20.🖌️ How big is the text, in px?
h2 {
  font-size: 32px;
  text-align: center;
  background-color: purple;
  color: orange;
}
21.✍️ Which property is set to bold in this rule?
.note {
background-color: yellow;
font-weight: bold;
} (a) bold (b) width (c) border (d) font-weight
22.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) bright green (c) magenta (d) black
23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 768px) {
  p {
    font-size: 30px;
  }
}
24.✍️ Which property is set to red in this rule?
#top {
text-align: center;
color: red;
} (a) color (b) font-size (c) red (d) text-align
25.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
26.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
27.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 1024px) {
  p {
    font-size: 14px;
  }
}
28.✍️ What value is given to text-align in this rule?
body {
  font-style: italic;
  text-align: center;
  padding: 8px;
} (a) yellow (b) 10px (c) center (d) text-align
29.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
30.🌈 In #000017 the blue part is the hex number 17. What is it as a normal number?
31.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
32.🖌️ What colour are the letters?
li {
  color: blue;
  background-color: green;
  font-size: 20px;
  text-align: center;
} (a) orange (b) blue (c) green
33.🎯 Which element does the selector div style? (a) <h1 id="hero"> (b) <span> (c) <div class="box"> (d) <p class="box">
34.True or false: HTML adds space around boxes. (a) False (b) True
35.🎨 One CSS file can style how many pages? (a) only one image (b) many pages (c) no pages (d) only one word
36.🖌️ Where does the text sit on its line?
p {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 32px;
} (a) on the left (b) on the right (c) in the middle
37.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
38.✍️ What is the selector in this CSS rule?
h2 {
  padding: 8px;
  margin: 10px;
  font-style: italic;
  width: 300px;
} (a) 10px (b) h1 (c) h2 (d) padding
39.🖌️ What colour is behind the letters?
p {
  font-size: 24px;
  text-align: center;
  background-color: yellow;
  color: orange;
} (a) white (b) orange (c) yellow
40.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 28px;
  }
} (a) No (b) Yes

Answer key

white
<h1 id="logo">
162
False
188
makes headings and lists
red
132
color
the later one
font-weight
the line round the box
gives the page structure
#ff00ff
;
blue
No
<link>
False
32
font-weight
black
24
color
flex-end
packs boxes at the start
14
center
the screen width
23
center
blue
<div class="box">
False
many pages
in the middle
3
h2
yellow
Yes

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