CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 826 · 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.🎯 Which CSS selector matches this element?
<h1 class="red" id="hero">Hello</h1> (a) .hero (b) #red (c) #hero (d) .box
2.True or false: CSS makes a link. (a) True (b) False
3.🌈 Which colour is #ff0000? (a) magenta (b) black (c) blue (d) red
4.Which of these does HTML do? (a) changes the page live (b) sets colours and fonts (c) checks a quiz answer (d) makes a link
5.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
6.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
7.✍️ What is the selector in this CSS rule?
.box {
  margin: 10px;
  text-align: center;
  background-color: yellow;
  padding: 8px;
} (a) h2 (b) center (c) .box (d) margin
8.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) blue (c) yellow (d) red
9.🎨 Which tag connects an outside CSS file? (a) <a> (b) <css> (c) <img> (d) <link>
10.🖌️ What colour are the letters?
h1 {
  text-align: center;
  background-color: purple;
  font-size: 28px;
  color: orange;
} (a) purple (b) red (c) orange
11.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 50px;
  padding: 30px;
  border: 2px solid black;
  margin: 0px;
}
12.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
13.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 768px) {
  p {
    font-size: 16px;
  }
} (a) Yes (b) No
14.🌈 Which hex code is cyan? (a) #00ffff (b) #00ff00 (c) #0000ff (d) #ff00ff
15.✍️ What value is given to margin in this rule?
h1 {
  width: 300px;
  margin: 10px;
  text-align: center;
} (a) bold (b) 10px (c) 8px (d) margin
16.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
17.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 768px) {
  p {
    font-size: 14px;
  }
} (a) Yes (b) No
18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 80px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}
19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 768px) {
  p {
    font-size: 26px;
  }
}
20.True or false: #hero is a class selector. (a) False (b) True
21.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) content (d) border
22.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
23.🎯 Which element does the selector .box style? (a) <p class="star"> (b) <h1 class="menu"> (c) <p class="box"> (d) <p id="box">
24.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) a solid or dotted edge (d) the text or picture
25.True or false: #top is an id selector. (a) False (b) True
26.✍️ Which property is set to yellow in this rule?
p {
  font-size: 20px;
  margin: 10px;
  background-color: yellow;
  color: red;
} (a) yellow (b) padding (c) background-color (d) margin
27.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
28.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
29.🖌️ What colour are the letters?
h2 {
  font-size: 28px;
  background-color: orange;
  color: purple;
  text-align: left;
} (a) purple (b) red (c) orange
30.✍️ Which property is set to center in this rule?
h1 {
  text-align: center;
  padding: 8px;
  color: red;
} (a) text-align (b) background-color (c) margin (d) center
31.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) no pages (d) many pages
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: 60px;
  padding: 30px;
  border: 4px solid black;
  margin: 0px;
}
33.⚖️ What colour is the text of this element?
<h1 class="menu" id="main">Hi</h1>
CSS:
#main { color: red; }
#main { color: black; } (a) yellow (b) red (c) purple (d) black
34.✍️ Which property is set to red in this rule?
p {
  padding: 8px;
  color: red;
  background-color: yellow;
  width: 300px;
} (a) red (b) text-align (c) font-size (d) color
35.🖌️ How big is the text, in px?
h1 {
  text-align: right;
  color: blue;
  background-color: orange;
  font-size: 16px;
}
36.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 30px;
  }
}
37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 280px;
  padding: 5px;
  border: 1px solid black;
  margin: 10px;
}
38.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
39.🌈 Which colour is #000000? (a) blue (b) white (c) black (d) bright green
40.True or false: padding is the gap round content. (a) True (b) False

Answer key

#hero
False
red
makes a link
Yes
CSS
.box
blue
<link>
orange
114
an id selector
Yes
#00ffff
10px
600px or narrower
No
102
20
False
border
No
<p class="box">
the text or picture
True
background-color
blue
:
purple
text-align
many pages
128
black
color
16
30
292
No
black
True

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