CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 68 · 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 wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 200px;
  justify-content: space-between;
}
Inside are 2 boxes, each 60px wide (no margins).
2.🖌️ What colour is behind the letters?
h2 {
  background-color: green;
  color: blue;
  text-align: right;
  font-size: 36px;
} (a) green (b) orange (c) blue
3.✍️ What is the selector in this CSS rule?
.box {
  font-size: 20px;
  color: red;
  background-color: yellow;
  text-align: center;
} (a) red (b) font-size (c) h2 (d) .box
4.True or false: .menu is an id selector. (a) True (b) False
5.⚖️ What colour is the text of this element?
<h2 class="box" id="logo">Hi</h2>
CSS:
h2 { color: white; }
h2 { color: purple; } (a) purple (b) orange (c) white (d) black
6.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
7.✍️ What value is given to padding in this rule?
li {
  text-align: center;
  padding: 8px;
  font-style: italic;
} (a) bold (b) 8px (c) 2px solid (d) padding
8.What does justify-content: flex-start 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.✍️ In color: blue; which part is the value? (a) ; (b) blue (c) : (d) color
10.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 26px;
  }
}
11.🎯 Which CSS selector matches this element?
<div class="note" id="intro">Hello</div> (a) .big (b) #intro (c) .intro (d) #note
12.Which of these is margin? (a) the gap round content (b) a solid or dotted edge (c) space outside the border (d) space inside the border
13.✍️ What value is given to color in this rule?
h2 {
border: 2px solid;
color: red;
} (a) color (b) center (c) red (d) 20px
14.🖌️ What colour are the letters?
p {
  background-color: purple;
  color: black;
  font-size: 12px;
  text-align: center;
} (a) black (b) white (c) purple
15.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
16.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
17.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) . (d) ,
18.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
19.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 18px;
  }
} (a) No (b) Yes
20.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
21.True or false: CSS lays out the page. (a) False (b) True
22.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
}
23.🔍 Which is the odd one out? (a) checks a quiz answer (b) sets colours and fonts (c) reacts to a button click (d) changes the page live
24.⚖️ What colour is the text of this element?
<h1 class="note" id="logo">Hi</h1>
CSS:
h1 { color: black; }
.note { color: yellow; } (a) black (b) yellow (c) purple (d) red
25.⚖️ What colour is the text of this element?
<p class="red" id="logo">Hi</p>
CSS:
p { color: yellow; }
#logo { color: orange; } (a) orange (b) yellow (c) black (d) green
26.✍️ Which property is set to 8px in this rule?
#top {
  font-size: 20px;
  padding: 8px;
  color: red;
} (a) padding (b) 8px (c) border (d) font-weight
27.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
28.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
}
29.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
30.🔍 Which is the odd one out? (a) shows a pop-up message (b) changes the text size (c) checks a quiz answer (d) changes the page live
31.⚖️ What colour is the text of this element?
<h1 class="menu" id="main">Hi</h1>
CSS:
h1 { color: blue; }
h1 { color: green; } (a) white (b) red (c) green (d) blue
32.✍️ What value is given to width in this rule?
.note {
  width: 300px;
  text-align: center;
  font-weight: bold;
} (a) red (b) width (c) italic (d) 300px
33.True or false: .note is an element selector. (a) True (b) False
34.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
35.Which of these does JavaScript do? (a) sets colours and fonts (b) changes the page live (c) adds space around boxes (d) makes a form box
36.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
37.🌈 Which colour of light is strongest in rgb(233, 58, 46)? (a) blue (b) red (c) green
38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 1024px) {
  p {
    font-size: 14px;
  }
}
39.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 24px;
  }
} (a) No (b) Yes
40.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) margin (d) border

Answer key

80
green
.box
False
purple
red
8px
packs boxes at the start
blue
20
#intro
space outside the border
red
black
an element selector
an id selector
;
an element selector
Yes
an id selector
True
10
sets colours and fonts
yellow
orange
padding
<style>
10
packs boxes at the end
changes the text size
green
300px
False
{ }
changes the page live
the viewport meta tag
red
14
No
margin

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