CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 885 · 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: 140px;
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
}
2.Which of these does HTML do? (a) sets colours and fonts (b) changes the page live (c) shows a pop-up message (d) makes a form box
3.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-end (d) flex-start
4.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
5.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-size (c) text-align (d) color
6.⚖️ What colour is the text of this element?
<p class="red" id="hero">Hi</p>
CSS:
#hero { color: yellow; }
p { color: white; } (a) white (b) yellow (c) orange (d) green
7.🧩 Which language makes headings and lists? (a) JavaScript (b) CSS (c) HTML
8.True or false: the border is the line round the box. (a) True (b) False
9.🌈 In #000001 the blue part is the hex number 01. What is it as a normal number?
10.🖌️ What colour is behind the letters?
p {
  background-color: blue;
  font-size: 28px;
  color: white;
  text-align: right;
} (a) purple (b) white (c) blue
11.🌈 In #000028 the blue part is the hex number 28. What is it as a normal number?
12.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 22px;
  }
}
13.True or false: JavaScript makes a form box. (a) True (b) False
14.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 130px;
  padding: 5px;
  border: 4px solid black;
  margin: 10px;
}
15.What does color do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) makes the text bold
16.🖌️ What colour are the letters?
h2 {
  font-size: 16px;
  text-align: left;
  color: green;
  background-color: red;
} (a) orange (b) red (c) green
17.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
18.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
19.🌈 Which colour is #ffffff? (a) magenta (b) black (c) white (d) blue
20.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
21.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
}
22.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 480px) {
  p {
    font-size: 12px;
  }
} (a) Yes (b) No
23.✍️ What value is given to margin in this rule?
h1 {
  font-size: 20px;
  border: 2px solid;
  width: 300px;
  margin: 10px;
} (a) 10px (b) bold (c) 8px (d) margin
24.✍️ Which property is set to center in this rule?
h1 {
  margin: 10px;
  text-align: center;
  font-weight: bold;
} (a) margin (b) background-color (c) center (d) text-align
25.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 768px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 16px;
  }
}
27.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 8px;
  }
} (a) No (b) Yes
28.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
margin: 10px;
font-weight: bold;
}
29.📦 In the box model, which part is the text or picture? (a) border (b) margin (c) content (d) padding
30.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
font-size: 20px;
background-color: yellow;
}
31.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 8px;
  }
}
32.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) fits every screen (d) never changes
33.🖌️ Where does the text sit on its line?
h1 {
  font-size: 40px;
  background-color: blue;
  text-align: left;
  color: red;
} (a) on the left (b) on the right (c) in the middle
34.⚖️ What colour is the text of this element?
<p class="big" id="intro">Hi</p>
CSS:
#intro { color: purple; }
p { color: red; } (a) white (b) purple (c) green (d) red
35.Which of these is padding? (a) space outside the border (b) the gap round content (c) the gap to other boxes (d) the line round the box
36.True or false: the border is a solid or dotted edge. (a) False (b) True
37.✍️ Which property is set to 10px in this rule?
p {
padding: 8px;
margin: 10px;
} (a) 10px (b) font-weight (c) margin (d) padding
38.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
39.🌈 Which colour is rgb(0, 255, 255)? (a) magenta (b) bright green (c) black (d) cyan
40.🌈 Which colour of light is strongest in rgb(85, 210, 114)? (a) blue (b) green (c) red

Answer key

162
makes a form box
flex-start
an element selector
font-size
yellow
HTML
True
1
blue
40
22
False
168
sets the letter colour
green
packs boxes at the start
blue
white
CSS
18
Yes
10px
text-align
No
16
Yes
2
content
2
8
fits every screen
on the left
purple
the gap round content
True
margin
No
cyan
green

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