CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 534 · 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.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 480px) {
  p {
    font-size: 14px;
  }
}
2.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) gives the page structure (d) counts down a timer
3.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) bright green (c) blue (d) magenta
4.✍️ What is the selector in this CSS rule?
h1 {
  width: 300px;
  font-weight: bold;
  font-size: 20px;
  background-color: yellow;
} (a) h1 (b) p (c) width (d) bold
5.🎯 Which CSS selector matches this element?
<h2 class="menu" id="top">Hello</h2> (a) h2 (b) #intro (c) .top (d) li
6.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 25px;
  border: 1px solid black;
  margin: 20px;
}
7.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
8.Which of these does JavaScript do? (a) checks a quiz answer (b) sets colours and fonts (c) makes a form box (d) makes headings and lists
9.True or false: the border is a solid or dotted edge. (a) False (b) True
10.True or false: HTML puts a picture on a page. (a) False (b) True
11.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
12.✍️ What is the selector in this CSS rule?
body {
  background-color: yellow;
  color: red;
  padding: 8px;
  font-size: 20px;
} (a) .box (b) background-color (c) body (d) red
13.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 250px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 100px wide (no margins).
14.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 22px;
  }
}
15.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
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: 220px;
  padding: 30px;
  border: 4px solid black;
  margin: 0px;
}
17.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
18.True or false: JavaScript reacts to a button click. (a) True (b) False
19.🎯 Which element does the selector .note style? (a) <p id="note"> (b) <p class="note"> (c) <h1 class="red"> (d) <p class="big">
20.🖌️ What colour are the letters?
h1 {
  color: red;
  background-color: yellow;
  font-size: 12px;
  text-align: center;
} (a) yellow (b) orange (c) red
21.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
22.🖌️ What colour are the letters?
h2 {
  color: black;
  text-align: left;
  font-size: 12px;
  background-color: green;
} (a) orange (b) black (c) green
23.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 15px;
  border: 1px solid black;
  margin: 5px;
}
24.🖌️ How big is the text, in px?
p {
  background-color: white;
  font-size: 12px;
  color: blue;
  text-align: left;
}
25.🌈 Which hex code is blue? (a) #00ff00 (b) #ffffff (c) #ff0000 (d) #0000ff
26.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
27.✍️ Which property is set to italic in this rule?
li {
text-align: center;
font-style: italic;
} (a) color (b) italic (c) font-style (d) font-size
28.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 290px;
  padding: 10px;
  border: 4px solid black;
  margin: 5px;
}
29.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
30.🧩 Which language adds space around boxes? (a) CSS (b) HTML (c) JavaScript
31.🎯 Which CSS selector matches this element?
<li class="red" id="end">Hello</li> (a) #hero (b) #red (c) .box (d) #end
32.🎯 What kind of selector is .big? (a) an id selector (b) a class selector (c) an element selector
33.🖌️ What colour are the letters?
li {
  background-color: purple;
  text-align: center;
  font-size: 32px;
  color: blue;
} (a) blue (b) green (c) purple
34.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
35.✍️ Which property is set to 20px in this rule?
h2 {
  color: red;
  font-weight: bold;
  font-size: 20px;
} (a) font-size (b) text-align (c) 20px (d) background-color
36.⚖️ What colour is the text of this element?
<h2 class="red" id="end">Hi</h2>
CSS:
.red { color: white; }
.red { color: black; } (a) purple (b) white (c) black (d) red
37.🌈 Which colour of light is strongest in rgb(29, 130, 218)? (a) red (b) blue (c) green
38.✍️ What value is given to background-color in this rule?
p {
  text-align: center;
  background-color: yellow;
  color: red;
  font-size: 20px;
} (a) background-color (b) 10px (c) yellow (d) 8px
39.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
40.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-size (c) font-weight (d) color

Answer key

14
counts down a timer
bright green
h1
h2
172
an id selector
checks a quiz answer
True
True
;
body
50
22
the screen width
288
Yes
True
<p class="note">
red
No
black
122
12
#0000ff
800px or wider
font-style
328
color
CSS
#end
a class selector
blue
center
font-size
black
blue
yellow
HTML
font-size

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