CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 533 · 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 tag connects an outside CSS file? (a) <link> (b) <a> (c) <img> (d) <css>
2.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 240px;
  justify-content: center;
}
Inside are 3 boxes, each 40px wide (no margins).
3.True or false: #top is an id selector. (a) False (b) True
4.Which of these is margin? (a) a solid or dotted edge (b) space inside the border (c) space outside the border (d) the gap round content
5.✍️ What value is given to text-align in this rule?
li {
  background-color: yellow;
  font-size: 20px;
  text-align: center;
  color: red;
} (a) center (b) 10px (c) yellow (d) text-align
6.🔍 Which is the odd one out? (a) adds space around boxes (b) gives the page structure (c) puts a picture on a page (d) makes a link
7.🧩 Which language checks a quiz answer? (a) JavaScript (b) HTML (c) CSS
8.Which of these is the border? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) space outside the border
9.True or false: CSS sets colours and fonts. (a) False (b) True
10.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
11.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) gives the page structure (d) sets colours and fonts
12.✍️ Which property is set to yellow in this rule?
.note {
font-size: 20px;
background-color: yellow;
} (a) background-color (b) margin (c) yellow (d) padding
13.✍️ How many declarations (property: value pairs) are in this rule?
#top {
width: 300px;
padding: 8px;
}
14.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
15.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
16.⚖️ What colour is the text of this element?
<p class="box" id="top">Hi</p>
CSS:
.box { color: yellow; }
.box { color: green; } (a) blue (b) orange (c) green (d) yellow
17.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 300px;
  justify-content: center;
}
Inside are 3 boxes, each 60px wide (no margins).
18.🧩 Which language reacts to a button click? (a) JavaScript (b) CSS (c) HTML
19.🖌️ Where does the text sit on its line?
li {
  color: purple;
  font-size: 32px;
  background-color: yellow;
  text-align: left;
} (a) on the right (b) in the middle (c) on the left
20.⚖️ What colour is the text of this element?
<h1 class="big" id="hero">Hi</h1>
CSS:
.big { color: blue; }
.big { color: yellow; } (a) blue (b) green (c) yellow (d) red
21.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 8px;
  }
}
22.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <body> (d) <style>
23.✍️ Which property is set to yellow in this rule?
h1 {
background-color: yellow;
border: 2px solid;
} (a) padding (b) yellow (c) background-color (d) margin
24.✍️ What value is given to text-align in this rule?
h2 {
background-color: yellow;
text-align: center;
} (a) text-align (b) center (c) 10px (d) yellow
25.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 270px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 100px wide (no margins).
26.True or false: .menu is a class selector. (a) False (b) True
27.⚖️ What colour is the text of this element?
<h2 class="menu" id="main">Hi</h2>
CSS:
.menu { color: white; }
#main { color: yellow; }
h2 { color: orange; } (a) green (b) yellow (c) white (d) orange
28.🖌️ Which CSS property sets the letter colour? (a) font-size (b) background-color (c) text-align (d) color
29.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
}
30.🎯 Which CSS selector matches this element?
<li class="star" id="logo">Hello</li> (a) .star (b) .logo (c) div (d) #end
31.True or false: padding is the gap round content. (a) False (b) True
32.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
33.🎯 Which CSS selector matches this element?
<h1 class="menu" id="hero">Hello</h1> (a) #hero (b) h2 (c) #menu (d) #top
34.⚖️ What colour is the text of this element?
<h1 class="box" id="end">Hi</h1>
CSS:
h1 { color: green; }
.box { color: red; } (a) white (b) green (c) red (d) purple
35.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Creative Sheet System (d) Cascading Style Sheets
36.⚖️ What colour is the text of this element?
<p class="big" id="intro">Hi</p>
CSS:
.big { color: blue; }
.big { color: green; } (a) blue (b) white (c) green (d) black
37.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 18px;
  }
}
38.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) border (d) margin
39.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
40.✍️ How many declarations (property: value pairs) are in this rule?
body {
width: 300px;
font-weight: bold;
}

Answer key

<link>
60
True
space outside the border
center
adds space around boxes
JavaScript
the line round the box
True
an element selector
sets colours and fonts
background-color
2
;
packs boxes at the start
green
60
JavaScript
on the left
yellow
8
<style>
background-color
center
70
True
yellow
color
10
.star
True
the screen width
#hero
red
Cascading Style Sheets
green
18
margin
color
2

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