CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 323 · 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 property is set to 300px in this rule?
.box {
  width: 300px;
  border: 2px solid;
  text-align: center;
} (a) font-style (b) width (c) 300px (d) color
2.🎯 Which element does the selector .menu style? (a) <li class="note"> (b) <div class="big"> (c) <li id="menu"> (d) <li class="menu">
3.Which of these does JavaScript do? (a) gives the page structure (b) makes a link (c) makes a form box (d) changes the page live
4.⚖️ What colour is the text of this element?
<h2 class="note" id="hero">Hi</h2>
CSS:
.note { color: green; }
.note { color: purple; } (a) blue (b) white (c) green (d) purple
5.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
6.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a link (c) shows a pop-up message (d) gives the page structure
7.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 220px;
  justify-content: center;
}
Inside are 3 boxes, each 60px wide (no margins).
8.✍️ What value is given to color in this rule?
.box {
  text-align: center;
  color: red;
  font-size: 20px;
} (a) color (b) center (c) red (d) 20px
9.True or false: padding is the gap round content. (a) False (b) True
10.✍️ Which property is set to 8px in this rule?
#top {
width: 300px;
padding: 8px;
} (a) 8px (b) padding (c) border (d) font-weight
11.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
12.🌈 Which hex code is bright green? (a) #ff00ff (b) #0000ff (c) #00ffff (d) #00ff00
13.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) flex-direction (d) justify-content
14.🎯 What kind of selector is body? (a) an id selector (b) a class selector (c) an element selector
15.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 1024px) {
  p {
    font-size: 28px;
  }
}
16.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <css> (d) <body>
17.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 240px;
  padding: 15px;
  border: 4px solid black;
  margin: 10px;
}
18.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
19.⚖️ What colour is the text of this element?
<h1 class="red" id="main">Hi</h1>
CSS:
.red { color: red; }
.red { color: white; } (a) yellow (b) blue (c) red (d) white
20.🖌️ What colour are the letters?
h1 {
  text-align: left;
  font-size: 36px;
  color: black;
  background-color: orange;
} (a) green (b) black (c) orange
21.🖌️ Where does the text sit on its line?
li {
  font-size: 20px;
  color: blue;
  background-color: purple;
  text-align: center;
} (a) on the left (b) on the right (c) in the middle
22.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
23.✍️ Which property is set to italic in this rule?
#top {
font-weight: bold;
font-style: italic;
} (a) color (b) font-size (c) italic (d) font-style
24.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center
25.🌈 In #640000 the red part is the hex number 64. What is it as a normal number?
26.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 110px;
  justify-content: space-between;
}
Inside are 2 boxes, each 50px wide (no margins).
27.Which of these does JavaScript do? (a) sets colours and fonts (b) puts a picture on a page (c) makes a link (d) reacts to a button click
28.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (max-width: 480px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
29.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 170px;
  padding: 30px;
  border: 4px solid black;
  margin: 20px;
}
30.🖌️ What colour is behind the letters?
li {
  text-align: right;
  background-color: orange;
  font-size: 40px;
  color: black;
} (a) black (b) blue (c) orange
31.🎨 Which tag connects an outside CSS file? (a) <img> (b) <a> (c) <css> (d) <link>
32.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
33.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 14px;
  }
} (a) Yes (b) No
34.✍️ How many declarations (property: value pairs) are in this rule?
p {
  font-style: italic;
  color: red;
  font-weight: bold;
  background-color: yellow;
}
35.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 768px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
36.⚖️ What colour is the text of this element?
<h1 class="red" id="intro">Hi</h1>
CSS:
.red { color: red; }
#intro { color: green; }
h1 { color: black; } (a) red (b) purple (c) black (d) green
37.✍️ How many declarations (property: value pairs) are in this rule?
.note {
font-size: 20px;
color: red;
}
38.🖌️ How big is the text, in px?
p {
  text-align: left;
  background-color: yellow;
  color: orange;
  font-size: 40px;
}
39.True or false: .card is an element selector. (a) True (b) False
40.✍️ What value is given to width in this rule?
h1 {
margin: 10px;
width: 300px;
} (a) red (b) italic (c) width (d) 300px

Answer key

width
<li class="menu">
changes the page live
purple
:
shows a pop-up message
20
red
True
padding
JavaScript
#00ff00
flex-direction
an element selector
20
<style>
298
14
white
black
in the middle
CSS
font-style
flex-end
100
10
reacts to a button click
Yes
278
orange
<link>
an element selector
No
4
Yes
green
2
40
False
300px

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