CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 772 · 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.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 300px;
  padding: 30px;
  border: 2px solid black;
  margin: 10px;
}
2.🎯 Which CSS selector matches this element?
<span class="big" id="hero">Hello</span> (a) .red (b) #hero (c) #top (d) #big
3.✍️ What is the selector in this CSS rule?
h2 {
  border: 2px solid;
  background-color: yellow;
  font-size: 20px;
} (a) h2 (b) yellow (c) h1 (d) border
4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 16px;
  }
}
5.📦 In the box model, which part is space inside the border? (a) margin (b) content (c) padding (d) border
6.🖌️ Where does the text sit on its line?
li {
  font-size: 36px;
  color: white;
  background-color: black;
  text-align: left;
} (a) on the left (b) on the right (c) in the middle
7.🖌️ How big is the text, in px?
li {
  background-color: orange;
  text-align: center;
  color: green;
  font-size: 20px;
}
8.✍️ What value is given to color in this rule?
h1 {
  font-weight: bold;
  color: red;
  font-style: italic;
  padding: 8px;
} (a) center (b) 20px (c) red (d) color
9.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
10.✍️ How many declarations (property: value pairs) are in this rule?
#top {
font-weight: bold;
}
11.Which of these does CSS do? (a) makes a link (b) checks a quiz answer (c) adds space around boxes (d) gives the page structure
12.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
13.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
14.What does color do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes the text bold
15.⚖️ What colour is the text of this element?
<h1 class="red" id="main">Hi</h1>
CSS:
h1 { color: yellow; }
.red { color: black; }
#main { color: purple; } (a) orange (b) black (c) yellow (d) purple
16.🌈 Which colour of light is strongest in rgb(125, 227, 5)? (a) blue (b) green (c) red
17.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 768px) {
  p {
    font-size: 12px;
  }
} (a) No (b) Yes
18.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
19.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) alt (d) src
20.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 8px;
  }
}
21.🖌️ What colour is behind the letters?
li {
  font-size: 24px;
  background-color: white;
  text-align: left;
  color: red;
} (a) red (b) black (c) white
22.✍️ How does a CSS comment start? (a) // (b) <!-- (c) /* (d) #
23.⚖️ What colour is the text of this element?
<p class="menu" id="top">Hi</p>
CSS:
p { color: orange; }
#top { color: black; }
.menu { color: red; } (a) green (b) red (c) orange (d) black
24.🖌️ What colour is behind the letters?
li {
  font-size: 36px;
  background-color: black;
  color: yellow;
  text-align: center;
} (a) black (b) red (c) yellow
25.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
26.✍️ What is the selector in this CSS rule?
h2 {
  font-weight: bold;
  font-style: italic;
  padding: 8px;
} (a) h1 (b) font-weight (c) h2 (d) italic
27.🖌️ What colour is behind the letters?
h2 {
  font-size: 40px;
  text-align: right;
  color: red;
  background-color: blue;
} (a) black (b) blue (c) red
28.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
29.💪 Which flexbox property sets space between boxes? (a) display: flex (b) align-items (c) justify-content (d) gap
30.🖌️ What colour are the letters?
h1 {
  background-color: blue;
  color: yellow;
  text-align: right;
  font-size: 16px;
} (a) yellow (b) red (c) blue
31.🌈 In #000024 the blue part is the hex number 24. What is it as a normal number?
32.Which of these is the content? (a) the text or picture (b) the gap to other boxes (c) space inside the border (d) the gap round content
33.True or false: HTML shows a pop-up message. (a) True (b) False
34.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) center (d) space-between
35.🖌️ What colour are the letters?
li {
  background-color: white;
  text-align: left;
  font-size: 36px;
  color: purple;
} (a) purple (b) red (c) white
36.True or false: JavaScript shows a pop-up message. (a) False (b) True
37.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) red (d) green
38.💪 Which flexbox property picks row or column? (a) display: flex (b) flex-direction (c) align-items (d) gap
39.✍️ What value is given to width in this rule?
.note {
width: 300px;
background-color: yellow;
} (a) width (b) red (c) italic (d) 300px
40.🖌️ What colour is behind the letters?
h1 {
  background-color: red;
  font-size: 12px;
  color: purple;
  text-align: center;
} (a) green (b) red (c) purple

Answer key

384
#hero
h2
16
padding
on the left
20
red
the screen width
1
adds space around boxes
an element selector
margin
sets the letter colour
purple
green
Yes
HTML
style
8
white
/*
black
black
800px or wider
h2
blue
puts boxes in the middle
gap
yellow
36
the text or picture
False
flex-start
purple
True
red
flex-direction
300px
red

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