CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 973 · 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 much empty space (px) is before the first box?
.row {
  display: flex;
  width: 280px;
  justify-content: center;
}
Inside are 2 boxes, each 100px wide (no margins).
2.🌈 Which colour of light is strongest in rgb(160, 138, 71)? (a) blue (b) red (c) green
3.🖌️ Where does the text sit on its line?
h2 {
  background-color: blue;
  text-align: center;
  font-size: 36px;
  color: green;
} (a) on the left (b) on the right (c) in the middle
4.🖌️ Where does the text sit on its line?
li {
  background-color: blue;
  text-align: left;
  font-size: 28px;
  color: green;
} (a) in the middle (b) on the left (c) on the right
5.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
6.What does background-color do? (a) sets the letter colour (b) makes the text bold (c) colours behind the text (d) makes letters bigger
7.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 600px) {
  p {
    font-size: 28px;
  }
}
8.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
9.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
10.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
11.⚖️ What colour is the text of this element?
<p class="note" id="main">Hi</p>
CSS:
.note { color: blue; }
.note { color: black; } (a) green (b) blue (c) red (d) black
12.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 28px;
  }
} (a) Yes (b) No
13.True or false: HTML makes headings and lists. (a) False (b) True
14.✍️ What value is given to background-color in this rule?
#top {
  padding: 8px;
  background-color: yellow;
  text-align: center;
} (a) 10px (b) background-color (c) yellow (d) 8px
15.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
16.⚖️ What colour is the text of this element?
<h1 class="big" id="intro">Hi</h1>
CSS:
h1 { color: orange; }
h1 { color: red; } (a) green (b) orange (c) black (d) red
17.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
18.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
19.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 28px;
  }
} (a) No (b) Yes
20.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
21.✍️ What is the selector in this CSS rule?
h2 {
  font-style: italic;
  font-weight: bold;
  text-align: center;
} (a) bold (b) h2 (c) h1 (d) font-style
22.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 200px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 60px wide (no margins).
23.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) border (d) margin
24.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 6 (d) 4
25.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
26.Which of these does CSS do? (a) rounds box corners (b) puts a picture on a page (c) reacts to a button click (d) shows a pop-up message
27.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) space-between (d) flex-end
28.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 1024px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
29.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
30.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 255 (d) 1000
31.✍️ Which property is set to red in this rule?
body {
  color: red;
  font-weight: bold;
  border: 2px solid;
} (a) text-align (b) color (c) font-size (d) red
32.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 5 (d) 2
33.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
34.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
}
35.🎯 Which element does the selector .big style? (a) <div class="box"> (b) <li id="big"> (c) <li class="red"> (d) <li class="big">
36.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 200px;
  padding: 15px;
  border: 3px solid black;
  margin: 15px;
}
37.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) alt (d) style
38.✍️ Which property is set to red in this rule?
p {
color: red;
background-color: yellow;
} (a) font-size (b) red (c) text-align (d) color
39.🖌️ How big is the text, in px?
h2 {
  color: orange;
  font-size: 20px;
  background-color: blue;
  text-align: center;
}
40.True or false: JavaScript reacts to a button click. (a) False (b) True

Answer key

40
red
in the middle
on the left
an element selector
colours behind the text
28
an id selector
No
.css
black
No
True
yellow
.
red
600px or narrower
the screen width
No
the viewport meta tag
h2
20
margin
3
No
rounds box corners
space-between
Yes
HTML
255
color
1
blue
12
<li class="big">
266
style
color
20
True

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