CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 443 · 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.📦 In the box model, which part is the gap round content? (a) content (b) border (c) padding (d) margin
2.🌈 Which colour is #ffffff? (a) cyan (b) blue (c) white (d) red
3.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .png (d) .css
4.What does font-size do? (a) makes letters bigger (b) sets the letter colour (c) colours behind the text (d) centres a heading
5.🎯 Which element does the selector .note style? (a) <span class="big"> (b) <p class="red"> (c) <span class="note"> (d) <span id="note">
6.✍️ Which property is set to 10px in this rule?
li {
  margin: 10px;
  border: 2px solid;
  text-align: center;
  width: 300px;
} (a) padding (b) font-weight (c) margin (d) 10px
7.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
8.🌈 Which hex code is cyan? (a) #000000 (b) #ff00ff (c) #ff0000 (d) #00ffff
9.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
10.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 260px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 100px wide (no margins).
11.✍️ What value is given to font-size in this rule?
.note {
  color: red;
  margin: 10px;
  font-size: 20px;
} (a) center (b) 20px (c) font-size (d) yellow
12.🖌️ Where does the text sit on its line?
li {
  font-size: 24px;
  text-align: left;
  background-color: white;
  color: blue;
} (a) on the left (b) in the middle (c) on the right
13.⚖️ What colour is the text of this element?
<h1 class="red" id="end">Hi</h1>
CSS:
#end { color: black; }
#end { color: red; } (a) yellow (b) red (c) black (d) white
14.⚖️ What colour is the text of this element?
<p class="star" id="logo">Hi</p>
CSS:
#logo { color: orange; }
p { color: green; } (a) yellow (b) orange (c) black (d) green
15.What does background-color do? (a) centres a heading (b) colours behind the text (c) makes the text bold (d) makes letters bigger
16.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) margin (d) content
17.True or false: CSS puts a picture on a page. (a) True (b) False
18.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 2 (d) 1
19.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
20.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
21.📱 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
22.Which of these does JavaScript do? (a) rounds box corners (b) makes a form box (c) counts down a timer (d) puts a picture on a page
23.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
24.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the hr tag (c) the viewport meta tag (d) the title tag
25.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
26.✍️ How many declarations (property: value pairs) are in this rule?
body {
  width: 300px;
  border: 2px solid;
  font-weight: bold;
  text-align: center;
}
27.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) center (d) flex-end
28.True or false: margin is space outside the border. (a) True (b) False
29.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 230px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 50px wide (no margins).
30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 190px;
  padding: 5px;
  border: 2px solid black;
  margin: 20px;
}
31.⚖️ What colour is the text of this element?
<h2 class="red" id="logo">Hi</h2>
CSS:
h2 { color: green; }
.red { color: red; }
#logo { color: purple; } (a) red (b) purple (c) green (d) black
32.🌈 In #d20000 the red part is the hex number d2. What is it as a normal number?
33.Which of these is margin? (a) a solid or dotted edge (b) the gap round content (c) the gap to other boxes (d) the line round the box
34.What does font-weight do? (a) centres a heading (b) colours behind the text (c) makes the text bold (d) makes letters bigger
35.Which of these is the content? (a) the text or picture (b) the gap to other boxes (c) space outside the border (d) space inside the border
36.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-family (c) font-weight (d) color
37.🎯 Which CSS selector matches this element?
<li class="box" id="top">Hello</li> (a) div (b) .box (c) .top (d) #box
38.✍️ Which property is set to 300px in this rule?
body {
width: 300px;
margin: 10px;
} (a) 300px (b) font-style (c) width (d) color
39.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 120px;
  padding: 30px;
  border: 1px solid black;
  margin: 10px;
}
40.⚖️ What colour is the text of this element?
<h1 class="box" id="hero">Hi</h1>
CSS:
h1 { color: green; }
h1 { color: black; } (a) orange (b) green (c) red (d) black

Answer key

padding
white
.css
makes letters bigger
<span class="note">
margin
an id selector
#00ffff
color
60
20px
on the left
red
orange
colours behind the text
margin
False
1
center
align-items
No
counts down a timer
fits every screen
the viewport meta tag
No
4
flex-start
True
80
204
purple
210
the gap to other boxes
makes the text bold
the text or picture
color
.box
width
202
black

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