CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 344 · 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.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
2.Which of these does JavaScript do? (a) makes a link (b) sets colours and fonts (c) adds space around boxes (d) changes the page live
3.⚖️ What colour is the text of this element?
<p class="note" id="logo">Hi</p>
CSS:
.note { color: green; }
#logo { color: yellow; }
p { color: red; } (a) red (b) blue (c) green (d) yellow
4.🌈 Which hex code is white? (a) #00ffff (b) #ffffff (c) #00ff00 (d) #000000
5.Which of these is the border? (a) the gap round content (b) the text or picture (c) space outside the border (d) the line round the box
6.True or false: JavaScript checks a quiz answer. (a) True (b) False
7.✍️ What value is given to font-size in this rule?
h2 {
  font-size: 20px;
  padding: 8px;
  text-align: center;
  font-style: italic;
} (a) 20px (b) center (c) yellow (d) font-size
8.✍️ What is the selector in this CSS rule?
.note {
  width: 300px;
  font-style: italic;
  font-weight: bold;
} (a) width (b) #top (c) .note (d) italic
9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 480px) {
  p {
    font-size: 18px;
  }
}
10.✍️ What is the selector in this CSS rule?
p {
  font-style: italic;
  padding: 8px;
  color: red;
} (a) .note (b) font-style (c) p (d) 8px
11.✍️ Which property is set to 10px in this rule?
h1 {
margin: 10px;
font-size: 20px;
} (a) font-weight (b) margin (c) 10px (d) padding
12.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 1024px) {
  p {
    font-size: 14px;
  }
} (a) No (b) Yes
13.🎯 Which element does the selector .menu style? (a) <h1 class="note"> (b) <h1 class="menu"> (c) <h1 id="menu"> (d) <h2 class="big">
14.🌈 Which colour is #ff0000? (a) red (b) blue (c) bright green (d) black
15.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 140px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 40px wide (no margins).
16.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
17.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 340px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 80px wide (no margins).
18.⚖️ What colour is the text of this element?
<h1 class="menu" id="intro">Hi</h1>
CSS:
#intro { color: red; }
#intro { color: white; } (a) blue (b) orange (c) white (d) red
19.🌈 In #000b00 the green part is the hex number 0b. What is it as a normal number?
20.🎯 Which CSS selector matches this element?
<p class="box" id="top">Hello</p> (a) #intro (b) p (c) .top (d) h1
21.🎯 Which element does the selector p style? (a) <h2 class="star"> (b) <p class="star"> (c) <li id="hero"> (d) <h1>
22.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 768px) {
  p {
    font-size: 26px;
  }
} (a) Yes (b) No
23.✍️ How does a CSS comment start? (a) # (b) /* (c) <!-- (d) //
24.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
25.🌈 Which colour is rgb(255, 255, 255)? (a) bright green (b) cyan (c) white (d) yellow
26.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the first one (d) the shorter one
28.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) border (d) padding
29.✍️ What is the selector in this CSS rule?
.note {
  font-weight: bold;
  padding: 8px;
  background-color: yellow;
} (a) 8px (b) font-weight (c) #top (d) .note
30.True or false: JavaScript makes a link. (a) False (b) True
31.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 340px;
  justify-content: center;
}
Inside are 4 boxes, each 80px wide (no margins).
32.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 600px) {
  p {
    font-size: 20px;
  }
}
33.Which of these does HTML do? (a) rounds box corners (b) lays out the page (c) makes headings and lists (d) changes the page live
34.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .png (d) .html
35.⚖️ What colour is the text of this element?
<h1 class="red" id="top">Hi</h1>
CSS:
h1 { color: blue; }
.red { color: yellow; }
#top { color: red; } (a) blue (b) yellow (c) red (d) white
36.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
37.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 14px;
  }
} (a) Yes (b) No
38.🖌️ What colour is behind the letters?
p {
  background-color: red;
  text-align: center;
  color: white;
  font-size: 12px;
} (a) white (b) red (c) blue
39.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
40.⚖️ What colour is the text of this element?
<h1 class="box" id="top">Hi</h1>
CSS:
#top { color: black; }
.box { color: purple; } (a) white (b) purple (c) blue (d) black

Answer key

packs boxes at the start
changes the page live
yellow
#ffffff
the line round the box
True
20px
.note
18
p
margin
Yes
<h1 class="menu">
red
60
border
20
white
11
p
<p class="star">
No
/*
puts boxes in the middle
white
a class selector
the later one
border
.note
False
10
20
makes headings and lists
.css
red
a class selector
No
red
JavaScript
black

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