CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 708 · 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 language makes a link? (a) JavaScript (b) CSS (c) HTML
2.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 270px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 100px wide (no margins).
3.🖌️ How big is the text, in px?
h2 {
  color: blue;
  background-color: green;
  text-align: left;
  font-size: 16px;
}
4.✍️ What value is given to text-align in this rule?
h1 {
text-align: center;
font-style: italic;
} (a) yellow (b) text-align (c) center (d) 10px
5.True or false: margin is space outside the border. (a) True (b) False
6.🖌️ Where does the text sit on its line?
li {
  font-size: 12px;
  background-color: white;
  color: black;
  text-align: left;
} (a) in the middle (b) on the right (c) on the left
7.✍️ What is the selector in this CSS rule?
.box {
  color: red;
  text-align: center;
  border: 2px solid;
} (a) color (b) .box (c) center (d) h2
8.⚖️ What colour is the text of this element?
<h1 class="red" id="end">Hi</h1>
CSS:
h1 { color: black; }
.red { color: purple; } (a) black (b) purple (c) red (d) white
9.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
10.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Creative Sheet System (d) Cascading Style Sheets
11.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 1024px) {
  p {
    font-size: 10px;
  }
}
12.⚖️ What colour is the text of this element?
<h1 class="menu" id="end">Hi</h1>
CSS:
h1 { color: yellow; }
h1 { color: black; } (a) purple (b) yellow (c) blue (d) black
13.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
14.✍️ What is the selector in this CSS rule?
p {
background-color: yellow;
text-align: center;
} (a) background-color (b) center (c) p (d) .note
15.📦 In the box model, which part is a solid or dotted edge? (a) border (b) padding (c) content (d) margin
16.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
17.⚖️ What colour is the text of this element?
<h1 class="star" id="intro">Hi</h1>
CSS:
h1 { color: red; }
h1 { color: orange; } (a) orange (b) purple (c) red (d) yellow
18.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) exactly 100px (d) 800px or wider
19.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 480px) {
  p {
    font-size: 22px;
  }
}
20.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
21.🌈 In #0000c8 the blue part is the hex number c8. What is it as a normal number?
22.Which of these is the content? (a) space outside the border (b) the text or picture (c) the gap round content (d) a solid or dotted edge
23.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
24.✍️ What value is given to width in this rule?
#top {
  background-color: yellow;
  width: 300px;
  margin: 10px;
} (a) 300px (b) italic (c) red (d) width
25.🖌️ How big is the text, in px?
h2 {
  color: white;
  text-align: center;
  font-size: 24px;
  background-color: green;
}
26.🖌️ Where does the text sit on its line?
li {
  text-align: left;
  color: green;
  background-color: blue;
  font-size: 36px;
} (a) on the right (b) in the middle (c) on the left
27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 110px;
  padding: 5px;
  border: 3px solid black;
  margin: 15px;
}
28.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 768px) {
  p {
    font-size: 16px;
  }
}
29.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
30.🖌️ Where does the text sit on its line?
li {
  background-color: yellow;
  font-size: 32px;
  color: black;
  text-align: right;
} (a) on the left (b) on the right (c) in the middle
31.True or false: the border is the gap to other boxes. (a) False (b) True
32.🖌️ Where does the text sit on its line?
h2 {
  font-size: 16px;
  color: blue;
  text-align: left;
  background-color: purple;
} (a) on the right (b) in the middle (c) on the left
33.🎯 Which CSS selector matches this element?
<h1 class="note" id="logo">Hello</h1> (a) .note (b) #end (c) .big (d) .logo
34.🌈 Which colour is rgb(0, 0, 0)? (a) yellow (b) black (c) bright green (d) cyan
35.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) F (d) J
36.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) style (d) alt
37.✍️ What is the selector in this CSS rule?
h1 {
  width: 300px;
  color: red;
  font-style: italic;
  border: 2px solid;
} (a) width (b) p (c) h1 (d) red
38.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 99 (d) 1000
39.True or false: JavaScript rounds box corners. (a) False (b) True
40.✍️ In color: blue; which part is the value? (a) : (b) color (c) ; (d) blue

Answer key

HTML
70
16
center
True
on the left
.box
purple
Yes
Cascading Style Sheets
10
black
the viewport meta tag
p
border
center
orange
800px or wider
24
equal gaps, none at ends
200
the text or picture
an element selector
300px
24
on the left
126
20
600px or narrower
on the right
False
on the left
.note
black
F
style
h1
255
False
blue

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