CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 241 · 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 the text of this element?
<h1 class="menu" id="hero">Hi</h1>
CSS:
.menu { color: yellow; }
#hero { color: orange; } (a) yellow (b) red (c) blue (d) orange
2.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 260px;
  padding: 25px;
  border: 3px solid black;
  margin: 10px;
}
3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 180px;
  padding: 15px;
  border: 5px solid black;
  margin: 5px;
}
4.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
5.True or false: the border is space outside the border. (a) True (b) False
6.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 450px;
  justify-content: space-between;
}
Inside are 4 boxes, each 60px wide (no margins).
7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 32px;
  }
}
8.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
9.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 8px;
  }
}
10.✍️ How many declarations (property: value pairs) are in this rule?
body {
font-size: 20px;
padding: 8px;
}
11.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
12.⚖️ What colour is the text of this element?
<h1 class="star" id="top">Hi</h1>
CSS:
#top { color: purple; }
#top { color: blue; } (a) purple (b) yellow (c) white (d) blue
13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 240px;
  padding: 25px;
  border: 5px solid black;
  margin: 0px;
}
14.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 16px;
  }
}
15.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 110px;
  padding: 10px;
  border: 3px solid black;
  margin: 15px;
}
16.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) red (d) green
17.🖌️ How big is the text, in px?
p {
  text-align: center;
  color: green;
  background-color: orange;
  font-size: 16px;
}
18.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
19.🌈 Which hex code is cyan? (a) #000000 (b) #00ffff (c) #ff00ff (d) #0000ff
20.🖌️ How big is the text, in px?
h1 {
  background-color: green;
  text-align: right;
  font-size: 24px;
  color: purple;
}
21.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
22.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="note"> (c) <div id="end"> (d) <h1 class="note">
23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 32px;
  }
}
24.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 90px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 40px wide (no margins).
25.🖌️ Which CSS property colours behind the text? (a) font-family (b) text-align (c) color (d) background-color
26.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) : (d) color
27.🌈 In #000016 the blue part is the hex number 16. What is it as a normal number?
28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 220px;
  padding: 5px;
  border: 4px solid black;
  margin: 5px;
}
29.🖌️ Where does the text sit on its line?
h1 {
  color: blue;
  background-color: yellow;
  text-align: center;
  font-size: 24px;
} (a) on the left (b) on the right (c) in the middle
30.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
31.What does font-size do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) centres a heading
32.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 210px;
  justify-content: flex-end;
}
Inside are 3 boxes, each 60px wide (no margins).
33.📦 In the box model, which part is space inside the border? (a) padding (b) border (c) margin (d) content
34.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
35.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 4 (d) 2
36.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) reacts to a button click (d) sets colours and fonts
37.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 22px;
  }
} (a) Yes (b) No
38.True or false: .big is a class selector. (a) False (b) True
39.⚖️ What colour is the text of this element?
<h2 class="star" id="end">Hi</h2>
CSS:
.star { color: red; }
.star { color: purple; } (a) black (b) red (c) purple (d) white
40.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <style> (d) <script>

Answer key

orange
336
220
an element selector
False
70
24
;
8
2
Yes
blue
300
12
166
blue
16
the screen width
#00ffff
24
{ }
<h1 class="note">
24
10
background-color
blue
22
238
in the middle
an id selector
makes letters bigger
30
padding
CSS
3
sets colours and fonts
No
True
purple
<style>

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