CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 909 · 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 flexbox property turns on flexbox? (a) display: flex (b) align-items (c) flex-direction (d) justify-content
2.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 200px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 80px wide (no margins).
3.🎯 Which element does the selector .star style? (a) <h1 id="star"> (b) <h2 class="note"> (c) <h1 class="star"> (d) <h1 class="menu">
4.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
5.🌈 Which hex code is red? (a) #0000ff (b) #ff00ff (c) #ffff00 (d) #ff0000
6.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 280px;
  justify-content: center;
}
Inside are 4 boxes, each 60px wide (no margins).
7.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 220px;
  padding: 30px;
  border: 5px solid black;
  margin: 10px;
}
8.✍️ What value is given to border in this rule?
#top {
width: 300px;
border: 2px solid;
} (a) 300px (b) 2px solid (c) italic (d) border
9.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
10.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 99 (d) 1000
11.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) space-between (d) flex-end
12.True or false: the border is the line round the box. (a) False (b) True
13.🌈 Which colour is #ff00ff? (a) black (b) blue (c) bright green (d) magenta
14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 768px) {
  p {
    font-size: 14px;
  }
}
15.🎯 What kind of selector is img? (a) an element selector (b) an id selector (c) a class selector
16.⚖️ What colour is the text of this element?
<h2 class="star" id="hero">Hi</h2>
CSS:
h2 { color: orange; }
h2 { color: red; } (a) green (b) red (c) orange (d) white
17.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
18.✍️ What is the selector in this CSS rule?
h1 {
  background-color: yellow;
  border: 2px solid;
  font-size: 20px;
} (a) 2px solid (b) background-color (c) p (d) h1
19.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
20.✍️ What is the selector in this CSS rule?
h2 {
  padding: 8px;
  color: red;
  background-color: yellow;
  font-weight: bold;
} (a) red (b) h1 (c) padding (d) h2
21.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
22.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 6px;
  }
}
23.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
24.🖌️ What colour are the letters?
li {
  font-size: 20px;
  color: white;
  background-color: yellow;
  text-align: right;
} (a) blue (b) white (c) yellow
25.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 100px wide (no margins).
26.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 480px) {
  p {
    font-size: 12px;
  }
} (a) Yes (b) No
27.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
28.⚖️ What colour is the text of this element?
<p class="menu" id="top">Hi</p>
CSS:
#top { color: purple; }
.menu { color: blue; }
p { color: orange; } (a) blue (b) purple (c) red (d) orange
29.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
30.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 1024px) {
  p {
    font-size: 12px;
  }
} (a) No (b) Yes
31.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 360px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 100px wide (no margins).
32.⚖️ What colour is the text of this element?
<h1 class="star" id="main">Hi</h1>
CSS:
#main { color: blue; }
h1 { color: green; }
.star { color: red; } (a) black (b) blue (c) red (d) green
33.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
34.✍️ What is the selector in this CSS rule?
.note {
text-align: center;
font-style: italic;
} (a) #top (b) .note (c) text-align (d) italic
35.Which of these is margin? (a) the gap round content (b) a solid or dotted edge (c) space outside the border (d) the line round the box
36.🌈 In #e60000 the red part is the hex number e6. What is it as a normal number?
37.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
38.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) gap (d) justify-content
39.Which of these does CSS do? (a) checks a quiz answer (b) lays out the page (c) reacts to a button click (d) counts down a timer
40.⚖️ What colour is the text of this element?
<p class="note" id="main">Hi</p>
CSS:
p { color: red; }
p { color: blue; } (a) blue (b) red (c) black (d) orange

Answer key

display: flex
40
<h1 class="star">
an id selector
#ff0000
20
310
2px solid
JavaScript
255
center
True
magenta
14
an element selector
red
the screen width
h1
CSS
h2
a class selector
12
blue
white
10
No
<style>
purple
an id selector
Yes
60
blue
{ }
.note
space outside the border
230
the viewport meta tag
gap
lays out the page
blue

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