CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 967 · 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 value is given to background-color in this rule?
h1 {
background-color: yellow;
font-style: italic;
} (a) yellow (b) background-color (c) 8px (d) 10px
2.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) [ ] (d) < >
3.True or false: JavaScript counts down a timer. (a) True (b) False
4.🔍 Which is the odd one out? (a) lays out the page (b) adds space around boxes (c) makes a link (d) sets colours and fonts
5.🎯 What kind of selector is .note? (a) an id selector (b) an element selector (c) a class selector
6.🖌️ Where does the text sit on its line?
li {
  color: orange;
  text-align: right;
  background-color: green;
  font-size: 16px;
} (a) in the middle (b) on the left (c) on the right
7.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 60px;
  padding: 15px;
  border: 4px solid black;
  margin: 5px;
}
8.⚖️ What colour is the text of this element?
<p class="red" id="main">Hi</p>
CSS:
p { color: red; }
p { color: yellow; } (a) red (b) yellow (c) orange (d) purple
9.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
10.🖌️ Where does the text sit on its line?
h2 {
  font-size: 24px;
  background-color: green;
  text-align: center;
  color: white;
} (a) on the left (b) in the middle (c) on the right
11.🎯 Which element does the selector #top style? (a) <li id="top"> (b) <div class="menu"> (c) <li class="top"> (d) <li id="intro">
12.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) text-align (d) color
13.True or false: the border is a solid or dotted edge. (a) True (b) False
14.🖌️ Where does the text sit on its line?
p {
  text-align: right;
  color: blue;
  font-size: 40px;
  background-color: orange;
} (a) in the middle (b) on the left (c) on the right
15.✍️ Which property is set to center in this rule?
h2 {
text-align: center;
color: red;
} (a) margin (b) text-align (c) background-color (d) center
16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 170px;
  padding: 5px;
  border: 5px solid black;
  margin: 10px;
}
17.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
18.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 180px;
  padding: 15px;
  border: 2px solid black;
  margin: 10px;
}
19.True or false: margin is the gap to other boxes. (a) True (b) False
20.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 230px;
  padding: 10px;
  border: 3px solid black;
  margin: 10px;
}
21.What does justify-content: flex-end 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
22.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 20px;
  }
} (a) Yes (b) No
23.🖌️ Where does the text sit on its line?
h1 {
  font-size: 20px;
  text-align: right;
  color: blue;
  background-color: orange;
} (a) in the middle (b) on the right (c) on the left
24.🎨 Which attribute adds CSS inside one tag? (a) alt (b) src (c) style (d) href
25.🧩 Which language makes a form box? (a) HTML (b) JavaScript (c) CSS
26.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
27.🎯 Which element does the selector .star style? (a) <li id="star"> (b) <li class="star"> (c) <div class="note"> (d) <li class="menu">
28.Which of these is the border? (a) space outside the border (b) the gap to other boxes (c) the gap round content (d) a solid or dotted edge
29.✍️ What value is given to border in this rule?
body {
border: 2px solid;
margin: 10px;
} (a) italic (b) 2px solid (c) 300px (d) border
30.🖌️ What colour are the letters?
p {
  text-align: left;
  background-color: orange;
  font-size: 32px;
  color: green;
} (a) green (b) white (c) orange
31.✍️ How does a CSS comment start? (a) /* (b) // (c) # (d) <!--
32.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) no pages (d) many pages
33.🖌️ Where does the text sit on its line?
h2 {
  background-color: orange;
  font-size: 16px;
  text-align: left;
  color: purple;
} (a) on the left (b) on the right (c) in the middle
34.🖌️ What colour is behind the letters?
p {
  text-align: right;
  color: orange;
  background-color: blue;
  font-size: 24px;
} (a) white (b) blue (c) orange
35.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 200px;
  padding: 15px;
  border: 1px solid black;
  margin: 5px;
}
36.🖌️ Where does the text sit on its line?
h1 {
  background-color: red;
  text-align: center;
  font-size: 32px;
  color: green;
} (a) in the middle (b) on the left (c) on the right
37.🖌️ How big is the text, in px?
h1 {
  font-size: 40px;
  text-align: center;
  color: red;
  background-color: white;
}
38.⚖️ What colour is the text of this element?
<h2 class="box" id="logo">Hi</h2>
CSS:
#logo { color: blue; }
#logo { color: yellow; } (a) orange (b) white (c) blue (d) yellow
39.✍️ In color: blue; which part is the property? (a) : (b) blue (c) color (d) ;
40.🖌️ Which CSS property makes letters bigger? (a) color (b) background-color (c) font-weight (d) font-size

Answer key

yellow
{ }
True
makes a link
a class selector
on the right
108
yellow
CSS
in the middle
<li id="top">
font-family
True
on the right
text-align
190
an element selector
234
True
276
packs boxes at the end
Yes
on the right
style
HTML
fits every screen
<li class="star">
a solid or dotted edge
2px solid
green
/*
many pages
on the left
blue
242
in the middle
40
yellow
color
font-size

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