CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 482 · 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 colour is behind the letters?
h2 {
  font-size: 40px;
  background-color: blue;
  color: red;
  text-align: left;
} (a) red (b) green (c) blue
2.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 300px;
  padding: 5px;
  border: 2px solid black;
  margin: 20px;
}
3.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 28px;
  }
}
4.⚖️ What colour is the text of this element?
<p class="menu" id="logo">Hi</p>
CSS:
p { color: purple; }
.menu { color: green; } (a) green (b) red (c) blue (d) purple
5.True or false: padding is space inside the border. (a) True (b) False
6.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
7.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) never changes (d) has no pictures
8.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 18px;
  }
} (a) Yes (b) No
9.🖌️ What colour are the letters?
li {
  font-size: 20px;
  color: yellow;
  text-align: left;
  background-color: green;
} (a) yellow (b) green (c) blue
10.🖌️ Which CSS property centres a heading? (a) text-align (b) color (c) background-color (d) font-weight
11.🌈 In #002500 the green part is the hex number 25. What is it as a normal number?
12.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 130px;
  padding: 5px;
  border: 4px solid black;
  margin: 0px;
}
13.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
14.True or false: CSS lays out the page. (a) False (b) True
15.🎯 Which element does the selector .box style? (a) <p class="star"> (b) <p id="box"> (c) <p class="box"> (d) <h1 class="menu">
16.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 180px;
  padding: 25px;
  border: 2px solid black;
  margin: 20px;
}
17.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) makes a link (d) lays out the page
18.🔍 Which is the odd one out? (a) makes a form box (b) changes the page live (c) puts a picture on a page (d) makes a link
19.Which of these is margin? (a) a solid or dotted edge (b) space inside the border (c) the gap round content (d) the gap to other boxes
20.🎯 Which CSS selector matches this element?
<li class="box" id="intro">Hello</li> (a) div (b) #box (c) #main (d) .box
21.True or false: JavaScript makes headings and lists. (a) True (b) False
22.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 30px;
  }
} (a) Yes (b) No
23.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 140px;
  padding: 25px;
  border: 4px solid black;
  margin: 5px;
}
24.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
25.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 480px) {
  p {
    font-size: 16px;
  }
}
26.What does font-family do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) picks the font style
27.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
28.True or false: li is a class selector. (a) True (b) False
29.🖌️ What colour is behind the letters?
h2 {
  background-color: red;
  font-size: 12px;
  text-align: center;
  color: blue;
} (a) blue (b) orange (c) red
30.🌈 Which colour of light is strongest in rgb(98, 100, 226)? (a) blue (b) red (c) green
31.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
32.⚖️ What colour is the text of this element?
<h2 class="note" id="end">Hi</h2>
CSS:
h2 { color: red; }
h2 { color: green; } (a) blue (b) green (c) red (d) black
33.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 270px;
  justify-content: flex-end;
}
Inside are 4 boxes, each 60px wide (no margins).
34.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) many pages (d) only one word
35.What does font-weight do? (a) colours behind the text (b) makes letters bigger (c) sets the letter colour (d) makes the text bold
36.✍️ What value is given to width in this rule?
#top {
width: 300px;
color: red;
} (a) red (b) width (c) italic (d) 300px
37.🔍 Which is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) counts down a timer (d) adds space around boxes
38.🖌️ Where does the text sit on its line?
h1 {
  background-color: yellow;
  color: blue;
  text-align: left;
  font-size: 40px;
} (a) in the middle (b) on the right (c) on the left
39.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (min-width: 1024px) {
  p {
    font-size: 20px;
  }
}
40.💪 Which flexbox property sets space between boxes? (a) align-items (b) gap (c) flex-direction (d) display: flex

Answer key

blue
354
24
green
True
:
fits every screen
Yes
yellow
text-align
37
148
JavaScript
True
<p class="box">
274
lays out the page
changes the page live
the gap to other boxes
.box
False
Yes
208
display: flex
16
picks the font style
an element selector
False
red
blue
equal gaps, none at ends
green
30
many pages
makes the text bold
300px
adds space around boxes
on the left
16
gap

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