CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 34 · 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) makes a form box (c) changes the text size (d) sets colours and fonts
2.🖌️ Where does the text sit on its line?
li {
  font-size: 24px;
  text-align: center;
  background-color: red;
  color: black;
} (a) on the left (b) in the middle (c) on the right
3.True or false: the content is the line round the box. (a) True (b) False
4.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 99 (d) 255
5.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) flex-end (d) center
6.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
7.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Computer Style Sheets (d) Colourful Site Styles
8.🎯 Which CSS selector matches this element?
<div class="note" id="hero">Hello</div> (a) .note (b) span (c) .big (d) #top
9.🖌️ What colour is behind the letters?
h1 {
  color: purple;
  font-size: 12px;
  background-color: yellow;
  text-align: left;
} (a) white (b) yellow (c) purple
10.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
11.🌈 Which colour is #ffffff? (a) blue (b) bright green (c) white (d) magenta
12.⚖️ What colour is the text of this element?
<p class="note" id="hero">Hi</p>
CSS:
.note { color: black; }
.note { color: blue; } (a) black (b) blue (c) purple (d) yellow
13.True or false: #logo is an id selector. (a) True (b) False
14.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 210px;
  padding: 5px;
  border: 2px solid black;
  margin: 15px;
}
15.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-start;
}
Inside are 4 boxes, each 50px wide (no margins).
16.Which of these does CSS do? (a) adds space around boxes (b) makes a link (c) reacts to a button click (d) changes the page live
17.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-start (d) flex-end
18.✍️ How many declarations (property: value pairs) are in this rule?
.box {
margin: 10px;
}
19.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-family (c) color (d) font-weight
20.🖌️ What colour are the letters?
p {
  color: orange;
  font-size: 40px;
  background-color: red;
  text-align: left;
} (a) red (b) white (c) orange
21.🖌️ How big is the text, in px?
p {
  background-color: green;
  text-align: left;
  font-size: 12px;
  color: orange;
}
22.🎯 Which element does the selector #top style? (a) <p class="red"> (b) <span id="intro"> (c) <span id="top"> (d) <span class="top">
23.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
24.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) style (d) alt
25.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
26.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
27.✍️ What value is given to color in this rule?
.box {
  color: red;
  font-weight: bold;
  text-align: center;
  margin: 10px;
} (a) 20px (b) color (c) center (d) red
28.🌈 Which colour of light is strongest in rgb(9, 73, 183)? (a) red (b) blue (c) green
29.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 24px;
  }
} (a) Yes (b) No
30.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 190px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 80px wide (no margins).
31.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) never changes (d) is only for laptops
32.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 320px;
  justify-content: space-between;
}
Inside are 4 boxes, each 50px wide (no margins).
33.✍️ How many declarations (property: value pairs) are in this rule?
p {
margin: 10px;
}
34.🖌️ Where does the text sit on its line?
p {
  color: yellow;
  background-color: blue;
  font-size: 36px;
  text-align: left;
} (a) in the middle (b) on the right (c) on the left
35.🖌️ Where does the text sit on its line?
h2 {
  background-color: blue;
  font-size: 20px;
  color: orange;
  text-align: left;
} (a) in the middle (b) on the left (c) on the right
36.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 30px;
  }
} (a) Yes (b) No
37.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 5px;
  border: 3px solid black;
  margin: 15px;
}
38.⚖️ What colour is the text of this element?
<h2 class="big" id="end">Hi</h2>
CSS:
h2 { color: white; }
#end { color: red; }
.big { color: green; } (a) white (b) orange (c) green (d) red
39.🖌️ What colour is behind the letters?
li {
  text-align: left;
  background-color: yellow;
  font-size: 16px;
  color: white;
} (a) yellow (b) black (c) white
40.True or false: #end is an id selector. (a) True (b) False

Answer key

makes a form box
in the middle
False
255
flex-start
the viewport meta tag
Cascading Style Sheets
.note
yellow
space-between
white
blue
True
254
10
adds space around boxes
flex-end
1
color
orange
12
<span id="top">
the screen width
style
:
<link>
red
blue
No
30
fits every screen
40
1
on the left
on the left
No
216
red
yellow
True

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