CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 888 · 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 background-color in this rule?
h1 {
background-color: yellow;
font-size: 20px;
} (a) background-color (b) 10px (c) 8px (d) yellow
2.Which of these is the content? (a) the gap round content (b) the line round the box (c) the gap to other boxes (d) the text or picture
3.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
4.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
5.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 2 (d) 4
6.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 16px;
  }
}
7.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 480px) {
  p {
    font-size: 14px;
  }
}
8.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 160px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}
10.⚖️ What colour is the text of this element?
<p class="box" id="main">Hi</p>
CSS:
#main { color: green; }
#main { color: white; } (a) blue (b) orange (c) white (d) green
11.⚖️ What colour is the text of this element?
<h2 class="red" id="hero">Hi</h2>
CSS:
#hero { color: black; }
#hero { color: white; } (a) yellow (b) black (c) white (d) blue
12.✍️ What is the selector in this CSS rule?
p {
  background-color: yellow;
  color: red;
  width: 300px;
} (a) red (b) background-color (c) p (d) .note
13.True or false: JavaScript lays out the page. (a) False (b) True
14.✍️ Which property is set to 2px solid in this rule?
p {
  width: 300px;
  font-weight: bold;
  border: 2px solid;
  background-color: yellow;
} (a) width (b) border (c) font-style (d) 2px solid
15.⚖️ What colour is the text of this element?
<h2 class="box" id="logo">Hi</h2>
CSS:
h2 { color: black; }
#logo { color: green; } (a) blue (b) black (c) red (d) green
16.🎨 A CSS file usually ends with which extension? (a) .png (b) .css (c) .js (d) .html
17.True or false: margin is the gap to other boxes. (a) False (b) True
18.🎯 What kind of selector is li? (a) an id selector (b) an element selector (c) a class selector
19.🌈 In #000090 the blue part is the hex number 90. What is it as a normal number?
20.True or false: HTML makes a form box. (a) True (b) False
21.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
22.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
23.✍️ How many declarations (property: value pairs) are in this rule?
body {
font-size: 20px;
background-color: yellow;
}
24.✍️ What value is given to font-weight in this rule?
.box {
  font-style: italic;
  font-size: 20px;
  font-weight: bold;
} (a) 300px (b) font-weight (c) 2px solid (d) bold
25.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 170px;
  justify-content: flex-end;
}
Inside are 3 boxes, each 50px wide (no margins).
26.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
27.⚖️ What colour is the text of this element?
<h2 class="star" id="hero">Hi</h2>
CSS:
h2 { color: red; }
h2 { color: green; } (a) blue (b) red (c) black (d) green
28.🖌️ What colour are the letters?
h1 {
  color: orange;
  background-color: red;
  font-size: 16px;
  text-align: left;
} (a) green (b) orange (c) red
29.🖌️ Where does the text sit on its line?
p {
  font-size: 16px;
  text-align: left;
  background-color: purple;
  color: yellow;
} (a) in the middle (b) on the left (c) on the right
30.🖌️ What colour are the letters?
h1 {
  font-size: 12px;
  color: purple;
  background-color: red;
  text-align: right;
} (a) red (b) yellow (c) purple
31.✍️ Which property is set to center in this rule?
.note {
  text-align: center;
  width: 300px;
  padding: 8px;
  font-weight: bold;
} (a) background-color (b) text-align (c) center (d) margin
32.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 160px;
  padding: 25px;
  border: 5px solid black;
  margin: 10px;
}
33.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black
34.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
35.⚖️ What colour is the text of this element?
<h1 class="red" id="main">Hi</h1>
CSS:
.red { color: green; }
#main { color: blue; }
h1 { color: red; } (a) red (b) blue (c) white (d) green
36.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
37.True or false: #top is an id selector. (a) False (b) True
38.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
39.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 26px;
  }
}
40.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;

Answer key

yellow
the text or picture
fits every screen
a class selector
3
12
14
puts boxes in the middle
184
white
white
p
False
border
green
.css
True
an element selector
144
True
an id selector
.
2
bold
20
the later one
green
orange
on the left
purple
text-align
240
red
the screen width
blue
<link>
True
HTML
24
:

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