CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 70 · 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.True or false: HTML gives the page structure. (a) True (b) False
2.Which of these is padding? (a) the gap round content (b) the text or picture (c) the gap to other boxes (d) space outside the border
3.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 20px;
  }
} (a) No (b) Yes
4.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 480px) {
  p {
    font-size: 14px;
  }
}
5.🌈 Which colour of light is strongest in rgb(161, 5, 85)? (a) red (b) blue (c) green
6.⚖️ What colour is the text of this element?
<p class="menu" id="logo">Hi</p>
CSS:
p { color: yellow; }
p { color: black; } (a) black (b) green (c) yellow (d) orange
7.⚖️ What colour is the text of this element?
<h1 class="red" id="main">Hi</h1>
CSS:
#main { color: red; }
.red { color: green; }
h1 { color: white; } (a) white (b) black (c) green (d) red
8.Which of these does JavaScript do? (a) rounds box corners (b) makes a form box (c) makes a link (d) checks a quiz answer
9.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
10.⚖️ What colour is the text of this element?
<h1 class="menu" id="top">Hi</h1>
CSS:
#top { color: purple; }
#top { color: black; } (a) purple (b) red (c) black (d) white
11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
12.Which of these is the border? (a) space inside the border (b) the line round the box (c) the text or picture (d) space outside the border
13.✍️ How many declarations (property: value pairs) are in this rule?
#top {
  padding: 8px;
  font-size: 20px;
  background-color: yellow;
}
14.🎨 Which attribute adds CSS inside one tag? (a) src (b) alt (c) style (d) href
15.What does font-weight do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) picks the font style
16.🎯 Which element does the selector div style? (a) <h1 id="main"> (b) <p class="red"> (c) <span> (d) <div class="red">
17.🌈 Which colour is #00ffff? (a) cyan (b) black (c) bright green (d) red
18.✍️ What value is given to padding in this rule?
.note {
margin: 10px;
padding: 8px;
} (a) 2px solid (b) 8px (c) bold (d) padding
19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 240px;
  padding: 20px;
  border: 4px solid black;
  margin: 10px;
}
20.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <a> (d) <css>
21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 120px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}
22.🖌️ What colour is behind the letters?
li {
  font-size: 24px;
  background-color: purple;
  text-align: left;
  color: blue;
} (a) purple (b) blue (c) yellow
23.⚖️ What colour is the text of this element?
<h1 class="big" id="end">Hi</h1>
CSS:
.big { color: purple; }
.big { color: orange; } (a) purple (b) orange (c) black (d) white
24.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
25.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
26.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) white (c) red (d) yellow
27.True or false: .card is an element selector. (a) True (b) False
28.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
}
29.✍️ How many declarations (property: value pairs) are in this rule?
h1 {
padding: 8px;
}
30.What does text-align do? (a) picks the font style (b) colours behind the text (c) centres a heading (d) makes the text bold
31.💪 Which flexbox property picks row or column? (a) justify-content (b) align-items (c) display: flex (d) flex-direction
32.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 12px;
  }
} (a) Yes (b) No
33.🎯 Which CSS selector matches this element?
<p class="star" id="main">Hello</p> (a) h1 (b) .star (c) .main (d) #star
34.🖌️ What colour is behind the letters?
p {
  font-size: 28px;
  text-align: left;
  color: black;
  background-color: purple;
} (a) orange (b) purple (c) black
35.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 5px;
  border: 5px solid black;
  margin: 5px;
}
36.🌈 Which colour of light is strongest in rgb(171, 71, 103)? (a) red (b) blue (c) green
37.⚖️ What colour is the text of this element?
<h1 class="star" id="main">Hi</h1>
CSS:
h1 { color: black; }
#main { color: green; } (a) black (b) green (c) purple (d) white
38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 20px;
  }
}
39.📦 In the box model, which part is space outside the border? (a) content (b) border (c) padding (d) margin
40.⚖️ What colour is the text of this element?
<h2 class="star" id="top">Hi</h2>
CSS:
#top { color: yellow; }
#top { color: purple; } (a) yellow (b) green (c) orange (d) purple

Answer key

True
the gap round content
Yes
14
red
black
red
checks a quiz answer
fits every screen
black
the later one
the line round the box
3
style
makes the text bold
<div class="red">
cyan
8px
288
<link>
164
purple
orange
an id selector
.
magenta
False
20
1
centres a heading
flex-direction
Yes
.star
purple
140
red
green
12
margin
purple

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