CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 265 · 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) justify-content (d) gap
2.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
3.🖌️ Which CSS property picks the font style? (a) font-size (b) font-family (c) font-weight (d) background-color
4.🔍 Which is the odd one out? (a) changes the text size (b) adds space around boxes (c) gives the page structure (d) rounds box corners
5.✍️ What value is given to width in this rule?
.box {
  font-style: italic;
  background-color: yellow;
  font-weight: bold;
  width: 300px;
} (a) red (b) width (c) italic (d) 300px
6.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 28px;
  }
} (a) Yes (b) No
7.⚖️ What colour is the text of this element?
<p class="big" id="end">Hi</p>
CSS:
#end { color: orange; }
p { color: yellow; } (a) white (b) orange (c) yellow (d) black
8.🎯 Which CSS selector matches this element?
<span class="box" id="hero">Hello</span> (a) .hero (b) p (c) #top (d) #hero
9.🎯 Which sign starts an id selector? (a) # (b) & (c) @ (d) .
10.✍️ What value is given to text-align in this rule?
p {
text-align: center;
color: red;
} (a) yellow (b) 10px (c) center (d) text-align
11.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 30px;
  }
}
12.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 130px;
  padding: 10px;
  border: 4px solid black;
  margin: 0px;
}
13.💪 Which flexbox property lines boxes up across? (a) gap (b) justify-content (c) display: flex (d) align-items
14.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
15.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
16.⚖️ What colour is the text of this element?
<h1 class="box" id="top">Hi</h1>
CSS:
#top { color: green; }
#top { color: orange; } (a) yellow (b) purple (c) green (d) orange
17.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 250px;
  justify-content: space-between;
}
Inside are 4 boxes, each 40px wide (no margins).
18.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) flex-direction (d) justify-content
19.🎨 A CSS file usually ends with which extension? (a) .html (b) .css (c) .js (d) .png
20.🖌️ What colour are the letters?
h2 {
  text-align: right;
  background-color: black;
  font-size: 12px;
  color: orange;
} (a) yellow (b) orange (c) black
21.⚖️ What colour is the text of this element?
<h1 class="note" id="main">Hi</h1>
CSS:
.note { color: yellow; }
#main { color: green; } (a) green (b) red (c) yellow (d) white
22.True or false: HTML adds space around boxes. (a) True (b) False
23.🌈 In #6f0000 the red part is the hex number 6f. What is it as a normal number?
24.True or false: margin is the gap round content. (a) False (b) True
25.🖌️ Where does the text sit on its line?
p {
  background-color: black;
  font-size: 16px;
  text-align: center;
  color: yellow;
} (a) in the middle (b) on the right (c) on the left
26.True or false: HTML makes a form box. (a) True (b) False
27.True or false: .note is a class selector. (a) False (b) True
28.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
29.⚖️ What colour is the text of this element?
<h2 class="note" id="logo">Hi</h2>
CSS:
.note { color: red; }
h2 { color: purple; } (a) orange (b) purple (c) red (d) white
30.✍️ What value is given to font-size in this rule?
h2 {
  margin: 10px;
  width: 300px;
  border: 2px solid;
  font-size: 20px;
} (a) font-size (b) yellow (c) 20px (d) center
31.What does background-color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
32.⚖️ What colour is the text of this element?
<h2 class="red" id="end">Hi</h2>
CSS:
#end { color: blue; }
h2 { color: black; } (a) blue (b) yellow (c) green (d) black
33.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Colourful Site Styles (d) Computer Style Sheets
34.🖌️ What colour is behind the letters?
p {
  text-align: left;
  font-size: 20px;
  color: orange;
  background-color: white;
} (a) orange (b) white (c) red
35.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
36.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 1024px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
37.True or false: CSS adds space around boxes. (a) True (b) False
38.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) font-size (c) color (d) background-color
39.⚖️ What colour is the text of this element?
<p class="note" id="logo">Hi</p>
CSS:
p { color: red; }
p { color: purple; } (a) yellow (b) purple (c) red (d) blue
40.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes

Answer key

display: flex
fits every screen
font-family
gives the page structure
300px
No
orange
#hero
#
center
30
158
align-items
HTML
an element selector
orange
30
flex-direction
.css
orange
green
False
111
False
in the middle
True
True
an element selector
red
20px
colours behind the text
blue
Cascading Style Sheets
white
the later one
Yes
True
color
purple
No

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