CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 908 · 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 does font-weight do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
2.✍️ What value is given to text-align in this rule?
h1 {
text-align: center;
color: red;
} (a) text-align (b) center (c) 10px (d) yellow
3.⚖️ What colour is the text of this element?
<h2 class="red" id="top">Hi</h2>
CSS:
#top { color: yellow; }
h2 { color: blue; } (a) blue (b) yellow (c) black (d) red
4.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 480px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
5.✍️ How many declarations (property: value pairs) are in this rule?
body {
  background-color: yellow;
  font-style: italic;
  text-align: center;
}
6.🖌️ Where does the text sit on its line?
h2 {
  color: orange;
  background-color: green;
  text-align: right;
  font-size: 20px;
} (a) on the left (b) in the middle (c) on the right
7.📦 In the box model, which part is the text or picture? (a) margin (b) border (c) padding (d) content
8.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 230px;
  justify-content: flex-start;
}
Inside are 4 boxes, each 40px wide (no margins).
9.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 280px;
  padding: 25px;
  border: 5px solid black;
  margin: 15px;
}
10.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 140px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 60px wide (no margins).
11.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
12.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
13.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 40px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}
14.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
15.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
16.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
17.📦 In the box model, which part is the gap round content? (a) content (b) padding (c) margin (d) border
18.🖌️ What colour are the letters?
p {
  color: yellow;
  text-align: left;
  background-color: blue;
  font-size: 32px;
} (a) blue (b) yellow (c) green
19.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) color (d) :
20.Which of these is padding? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) space outside the border
21.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 20px;
  }
} (a) No (b) Yes
22.Which of these does JavaScript do? (a) reacts to a button click (b) changes the text size (c) gives the page structure (d) sets colours and fonts
23.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) 600px or narrower (d) exactly 1000px
24.📦 In the box model, which part is the gap to other boxes? (a) content (b) margin (c) border (d) padding
25.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 410px;
  justify-content: flex-start;
}
Inside are 4 boxes, each 100px wide (no margins).
26.⚖️ What colour is the text of this element?
<p class="star" id="top">Hi</p>
CSS:
#top { color: green; }
#top { color: white; } (a) yellow (b) green (c) orange (d) white
27.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 80px;
  padding: 30px;
  border: 3px solid black;
  margin: 10px;
}
28.True or false: .star is a class selector. (a) False (b) True
29.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 440px;
  justify-content: space-between;
}
Inside are 3 boxes, each 100px wide (no margins).
30.🖌️ What colour are the letters?
h2 {
  color: black;
  text-align: right;
  font-size: 12px;
  background-color: white;
} (a) orange (b) black (c) white
31.Which of these does HTML do? (a) changes the page live (b) rounds box corners (c) sets colours and fonts (d) puts a picture on a page
32.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 220px;
  justify-content: space-between;
}
Inside are 4 boxes, each 40px wide (no margins).
33.🌈 Which colour of light is strongest in rgb(199, 0, 64)? (a) red (b) green (c) blue
34.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
35.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
36.🌈 Which hex code is magenta? (a) #ff00ff (b) #000000 (c) #ffff00 (d) #00ff00
37.✍️ How many declarations (property: value pairs) are in this rule?
#top {
padding: 8px;
}
38.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the title tag (d) the viewport meta tag
39.✍️ What is the selector in this CSS rule?
.note {
  color: red;
  margin: 10px;
  padding: 8px;
  text-align: center;
} (a) color (b) #top (c) .note (d) 10px
40.⚖️ What colour is the text of this element?
<h1 class="menu" id="top">Hi</h1>
CSS:
h1 { color: blue; }
h1 { color: yellow; } (a) yellow (b) red (c) green (d) blue

Answer key

makes the text bold
center
yellow
Yes
3
on the right
content
70
370
20
JavaScript
red
100
<style>
an element selector
:
padding
yellow
blue
space inside the border
No
reacts to a button click
600px or narrower
margin
10
white
166
True
70
black
puts a picture on a page
20
red
flex-start
#
#ff00ff
1
the viewport meta tag
.note
yellow

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