CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 664 · 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 value is given to text-align in this rule?
#top {
text-align: center;
padding: 8px;
} (a) 10px (b) yellow (c) text-align (d) center
2.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
3.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
4.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) flex-direction (c) justify-content (d) gap
5.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 380px;
  justify-content: center;
}
Inside are 4 boxes, each 80px wide (no margins).
6.🌈 Which colour is #000000? (a) yellow (b) bright green (c) red (d) black
7.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 100px wide (no margins).
8.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 50px;
  padding: 25px;
  border: 1px solid black;
  margin: 5px;
}
9.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) display: flex (d) justify-content
10.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 50px;
  padding: 10px;
  border: 3px solid black;
  margin: 0px;
}
11.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
margin: 10px;
padding: 8px;
}
12.✍️ What value is given to padding in this rule?
body {
width: 300px;
padding: 8px;
} (a) 2px solid (b) 8px (c) padding (d) bold
13.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
14.True or false: padding is the gap round content. (a) True (b) False
15.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) padding (c) border (d) content
16.✍️ What is the selector in this CSS rule?
body {
  font-weight: bold;
  color: red;
  font-style: italic;
  background-color: yellow;
} (a) red (b) font-weight (c) body (d) .box
17.🖌️ Which CSS property sets the letter colour? (a) font-size (b) color (c) background-color (d) text-align
18.✍️ How many declarations (property: value pairs) are in this rule?
body {
  padding: 8px;
  text-align: center;
  width: 300px;
  border: 2px solid;
}
19.⚖️ What colour is the text of this element?
<p class="big" id="main">Hi</p>
CSS:
#main { color: red; }
.big { color: blue; }
p { color: purple; } (a) purple (b) red (c) blue (d) white
20.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
21.🎯 Which CSS selector matches this element?
<h1 class="note" id="intro">Hello</h1> (a) .big (b) h1 (c) .intro (d) #note
22.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
23.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) exactly 100px (c) 800px or narrower (d) 800px or wider
24.True or false: margin is space inside the border. (a) False (b) True
25.What does font-weight do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) sets the letter colour
26.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 330px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 100px wide (no margins).
27.🖌️ What colour is behind the letters?
h2 {
  font-size: 24px;
  color: orange;
  text-align: left;
  background-color: purple;
} (a) purple (b) green (c) orange
28.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 18px;
  }
}
29.✍️ How many declarations (property: value pairs) are in this rule?
#top {
  font-style: italic;
  margin: 10px;
  padding: 8px;
}
30.✍️ What is the selector in this CSS rule?
h2 {
  color: red;
  background-color: yellow;
  border: 2px solid;
  margin: 10px;
} (a) color (b) h2 (c) h1 (d) yellow
31.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 170px;
  justify-content: center;
}
Inside are 3 boxes, each 50px wide (no margins).
32.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
33.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) flex-start (d) space-between
34.🖌️ Where does the text sit on its line?
h2 {
  background-color: yellow;
  font-size: 16px;
  color: white;
  text-align: center;
} (a) on the right (b) on the left (c) in the middle
35.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
36.🖌️ What colour is behind the letters?
h1 {
  text-align: center;
  color: yellow;
  font-size: 28px;
  background-color: red;
} (a) white (b) yellow (c) red
37.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) black (c) bright green (d) yellow
38.🖌️ Which CSS property centres a heading? (a) font-size (b) text-align (c) background-color (d) font-family
39.🌈 In #0000c1 the blue part is the hex number c1. What is it as a normal number?
40.⚖️ What colour is the text of this element?
<h2 class="red" id="top">Hi</h2>
CSS:
.red { color: yellow; }
.red { color: red; } (a) green (b) red (c) black (d) yellow

Answer key

center
fits every screen
an id selector
justify-content
30
black
10
112
flex-direction
76
2
8px
an element selector
True
border
body
color
4
red
the viewport meta tag
h1
blue
800px or wider
False
makes the text bold
30
purple
18
3
h2
10
HTML
space-between
in the middle
.
red
yellow
text-align
193
red

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