CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 157 · 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 kind of selector is .card? (a) a class selector (b) an id selector (c) an element selector
2.True or false: .menu is a class selector. (a) True (b) False
3.✍️ Which property is set to 300px in this rule?
p {
  font-size: 20px;
  color: red;
  text-align: center;
  width: 300px;
} (a) width (b) 300px (c) font-style (d) color
4.✍️ What is the selector in this CSS rule?
body {
  width: 300px;
  font-size: 20px;
  color: red;
  margin: 10px;
} (a) .box (b) body (c) width (d) 20px
5.🎯 Can many elements share the same class? (a) No (b) Yes
6.⚖️ What colour is the text of this element?
<p class="menu" id="logo">Hi</p>
CSS:
#logo { color: white; }
#logo { color: blue; } (a) green (b) red (c) blue (d) white
7.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 20px;
  }
}
8.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
9.⚖️ What colour is the text of this element?
<h1 class="box" id="intro">Hi</h1>
CSS:
h1 { color: blue; }
#intro { color: yellow; }
.box { color: green; } (a) blue (b) green (c) yellow (d) orange
10.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 6px;
  }
}
11.✍️ How many declarations (property: value pairs) are in this rule?
li {
  color: red;
  font-weight: bold;
  background-color: yellow;
  font-size: 20px;
}
12.✍️ Which property is set to 300px in this rule?
p {
text-align: center;
width: 300px;
} (a) 300px (b) font-style (c) color (d) width
13.⚖️ What colour is the text of this element?
<p class="star" id="logo">Hi</p>
CSS:
p { color: black; }
p { color: blue; } (a) black (b) yellow (c) purple (d) blue
14.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) display: flex (d) flex-direction
15.What does font-family do? (a) makes the text bold (b) sets the letter colour (c) colours behind the text (d) picks the font style
16.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Colourful Site Styles (d) Computer Style Sheets
17.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
18.⚖️ What colour is the text of this element?
<h1 class="menu" id="intro">Hi</h1>
CSS:
h1 { color: red; }
.menu { color: blue; } (a) white (b) blue (c) red (d) purple
19.🖌️ How big is the text, in px?
h1 {
  text-align: left;
  color: blue;
  font-size: 12px;
  background-color: white;
}
20.🌈 Which hex code is yellow? (a) #0000ff (b) #00ff00 (c) #ff0000 (d) #ffff00
21.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 90px;
  padding: 30px;
  border: 3px solid black;
  margin: 10px;
}
23.🎯 Which CSS selector matches this element?
<p class="menu" id="logo">Hello</p> (a) .note (b) #logo (c) .logo (d) h1
24.🖌️ What colour is behind the letters?
li {
  background-color: blue;
  text-align: right;
  font-size: 32px;
  color: yellow;
} (a) blue (b) yellow (c) white
25.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
26.🌈 In #1e0000 the red part is the hex number 1e. What is it as a normal number?
27.⚖️ What colour is the text of this element?
<h1 class="menu" id="main">Hi</h1>
CSS:
#main { color: red; }
h1 { color: black; }
.menu { color: blue; } (a) purple (b) black (c) blue (d) red
28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
29.🖌️ How big is the text, in px?
p {
  text-align: center;
  font-size: 36px;
  background-color: red;
  color: yellow;
}
30.🌈 In #004100 the green part is the hex number 41. What is it as a normal number?
31.⚖️ What colour is the text of this element?
<h1 class="menu" id="intro">Hi</h1>
CSS:
h1 { color: purple; }
#intro { color: red; } (a) white (b) purple (c) black (d) red
32.⚖️ What colour is the text of this element?
<h2 class="big" id="hero">Hi</h2>
CSS:
h2 { color: blue; }
#hero { color: orange; } (a) blue (b) red (c) white (d) orange
33.🎯 What kind of selector is p? (a) an element selector (b) an id selector (c) a class selector
34.⚖️ What colour is the text of this element?
<p class="big" id="hero">Hi</p>
CSS:
p { color: green; }
p { color: black; } (a) purple (b) green (c) yellow (d) black
35.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 1024px) {
  p {
    font-size: 14px;
  }
} (a) No (b) Yes
36.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
}
37.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 160px;
  padding: 15px;
  border: 5px solid black;
  margin: 10px;
}
38.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) bright green (c) magenta (d) blue
39.What does font-size do? (a) makes letters bigger (b) colours behind the text (c) picks the font style (d) makes the text bold
40.True or false: body is an id selector. (a) False (b) True

Answer key

a class selector
True
width
body
Yes
blue
20
blue
yellow
6
4
width
blue
flex-direction
picks the font style
Cascading Style Sheets
No
blue
12
#ffff00
;
156
#logo
blue
red
30
red
the later one
36
65
red
orange
an element selector
black
Yes
24
220
magenta
makes letters bigger
False

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