CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 546 · 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 many declarations (property: value pairs) are in this rule?
h1 {
margin: 10px;
padding: 8px;
}
2.🖌️ What colour are the letters?
p {
  color: white;
  background-color: blue;
  text-align: left;
  font-size: 40px;
} (a) blue (b) black (c) white
3.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
4.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 768px) {
  p {
    font-size: 28px;
  }
}
5.Which of these does CSS do? (a) checks a quiz answer (b) rounds box corners (c) reacts to a button click (d) makes headings and lists
6.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <body> (d) <script>
7.True or false: JavaScript checks a quiz answer. (a) True (b) False
8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
9.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 340px;
  justify-content: space-between;
}
Inside are 3 boxes, each 80px wide (no margins).
10.🎯 Which sign starts an id selector? (a) @ (b) & (c) . (d) #
11.✍️ How many declarations (property: value pairs) are in this rule?
p {
  border: 2px solid;
  margin: 10px;
  font-style: italic;
  text-align: center;
}
12.✍️ What is the selector in this CSS rule?
.note {
margin: 10px;
border: 2px solid;
} (a) .note (b) #top (c) margin (d) 2px solid
13.Which of these does JavaScript do? (a) gives the page structure (b) changes the text size (c) puts a picture on a page (d) counts down a timer
14.🖌️ What colour are the letters?
li {
  text-align: right;
  font-size: 32px;
  background-color: orange;
  color: blue;
} (a) orange (b) black (c) blue
15.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
16.🎨 Which tag connects an outside CSS file? (a) <img> (b) <a> (c) <link> (d) <css>
17.🎯 Which CSS selector matches this element?
<div class="box" id="top">Hello</div> (a) .star (b) span (c) .box (d) #box
18.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
19.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 140px;
  padding: 5px;
  border: 5px solid black;
  margin: 10px;
}
20.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
21.⚖️ What colour is the text of this element?
<p class="big" id="main">Hi</p>
CSS:
.big { color: blue; }
.big { color: yellow; } (a) red (b) yellow (c) green (d) blue
22.Which of these is the content? (a) the gap to other boxes (b) space outside the border (c) the gap round content (d) the text or picture
23.✍️ What value is given to font-weight in this rule?
h1 {
font-weight: bold;
padding: 8px;
} (a) 300px (b) 2px solid (c) bold (d) font-weight
24.🖌️ Which CSS property picks the font style? (a) background-color (b) font-family (c) text-align (d) font-size
25.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) ( ) (d) [ ]
26.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) bright green (c) magenta (d) red
27.✍️ How many declarations (property: value pairs) are in this rule?
li {
  background-color: yellow;
  width: 300px;
  color: red;
  text-align: center;
}
28.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) gap (c) justify-content (d) align-items
29.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the viewport meta tag (d) the hr tag
30.🔍 Which is the odd one out? (a) changes the text size (b) makes headings and lists (c) adds space around boxes (d) sets colours and fonts
31.✍️ What value is given to border in this rule?
body {
font-weight: bold;
border: 2px solid;
} (a) italic (b) border (c) 300px (d) 2px solid
32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 260px;
  padding: 5px;
  border: 1px solid black;
  margin: 15px;
}
33.✍️ Which property is set to italic in this rule?
p {
  margin: 10px;
  font-style: italic;
  text-align: center;
  font-size: 20px;
} (a) font-style (b) font-size (c) color (d) italic
34.✍️ What is the selector in this CSS rule?
h1 {
border: 2px solid;
text-align: center;
} (a) border (b) center (c) h1 (d) p
35.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 30px;
  }
}
37.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 50px;
  padding: 25px;
  border: 5px solid black;
  margin: 10px;
}
38.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
39.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 250px;
  padding: 25px;
  border: 4px solid black;
  margin: 15px;
}
40.True or false: JavaScript makes a form box. (a) True (b) False

Answer key

2
white
packs boxes at the end
28
rounds box corners
<style>
True
the later one
50
#
4
.note
counts down a timer
blue
the screen width
<link>
.box
600px or narrower
180
space-between
yellow
the text or picture
bold
font-family
{ }
white
4
justify-content
the viewport meta tag
makes headings and lists
2px solid
272
font-style
h1
CSS
24
130
red
338
False

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