CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 737 · 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 selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
2.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 260px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 50px wide (no margins).
3.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 6px;
  }
}
4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
5.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 240px;
  justify-content: space-between;
}
Inside are 3 boxes, each 40px wide (no margins).
6.⚖️ What colour is the text of this element?
<h2 class="note" id="top">Hi</h2>
CSS:
.note { color: yellow; }
.note { color: blue; } (a) yellow (b) blue (c) black (d) purple
7.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 160px;
  justify-content: center;
}
Inside are 2 boxes, each 60px wide (no margins).
8.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 20px;
  }
} (a) No (b) Yes
9.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
10.Which of these does CSS do? (a) puts a picture on a page (b) makes a form box (c) sets colours and fonts (d) makes headings and lists
11.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <script> (d) <body>
12.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 20px;
  }
} (a) Yes (b) No
13.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
14.🖌️ What colour are the letters?
li {
  text-align: right;
  font-size: 16px;
  background-color: red;
  color: purple;
} (a) black (b) red (c) purple
15.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
16.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) content (d) border
17.🖌️ What colour are the letters?
h2 {
  color: purple;
  font-size: 24px;
  background-color: white;
  text-align: center;
} (a) purple (b) white (c) red
18.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-size (d) font-weight
19.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
20.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 768px) {
  p {
    font-size: 32px;
  }
} (a) No (b) Yes
21.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}
22.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
23.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
24.True or false: CSS makes a link. (a) True (b) False
25.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 220px;
  justify-content: center;
}
Inside are 4 boxes, each 40px wide (no margins).
26.🌈 Which colour is #00ffff? (a) bright green (b) blue (c) cyan (d) red
27.⚖️ What colour is the text of this element?
<h2 class="box" id="logo">Hi</h2>
CSS:
h2 { color: purple; }
h2 { color: black; } (a) orange (b) yellow (c) purple (d) black
28.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) flex-start (d) space-between
29.🖌️ What colour are the letters?
h2 {
  text-align: right;
  font-size: 40px;
  background-color: purple;
  color: yellow;
} (a) purple (b) yellow (c) blue
30.🧩 Which language makes a form box? (a) CSS (b) JavaScript (c) HTML
31.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) rounds box corners (d) shows a pop-up message
32.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 480px) {
  p {
    font-size: 14px;
  }
}
33.🎯 Which sign starts an id selector? (a) @ (b) . (c) # (d) &
34.🌈 Which colour of light is strongest in rgb(246, 60, 58)? (a) blue (b) red (c) green
35.✍️ What is the selector in this CSS rule?
p {
width: 300px;
background-color: yellow;
} (a) .note (b) yellow (c) p (d) width
36.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
37.⚖️ What colour is the text of this element?
<h1 class="red" id="top">Hi</h1>
CSS:
#top { color: white; }
#top { color: green; } (a) white (b) black (c) green (d) purple
38.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) 600px or wider (d) turned off
39.Which of these does CSS do? (a) shows a pop-up message (b) makes headings and lists (c) changes the text size (d) changes the page live
40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 190px;
  padding: 5px;
  border: 3px solid black;
  margin: 0px;
}

Answer key

an element selector
60
12
the later one
60
blue
20
Yes
an id selector
sets colours and fonts
<style>
No
Yes
purple
No
border
purple
color
a class selector
No
174
flex-start
;
False
30
cyan
black
center
yellow
HTML
rounds box corners
14
#
red
p
HTML
green
600px or narrower
changes the text size
206

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