CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 326 · 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?
<p class="red" id="main">Hi</p>
CSS:
p { color: purple; }
p { color: red; } (a) red (b) purple (c) green (d) white
2.✍️ What is the selector in this CSS rule?
body {
  background-color: yellow;
  width: 300px;
  text-align: center;
} (a) 300px (b) body (c) background-color (d) .box
3.🌈 In #005d00 the green part is the hex number 5d. What is it as a normal number?
4.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 255 (c) 100 (d) 1000
5.🎯 Which CSS selector matches this element?
<h2 class="star" id="intro">Hello</h2> (a) h2 (b) .intro (c) #star (d) li
6.⚖️ What colour is the text of this element?
<h2 class="menu" id="intro">Hi</h2>
CSS:
.menu { color: white; }
.menu { color: green; } (a) white (b) orange (c) blue (d) green
7.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-weight (c) background-color (d) color
8.🎯 Which CSS selector matches this element?
<p class="red" id="end">Hello</p> (a) #red (b) .end (c) p (d) #hero
9.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 600px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
10.True or false: li is an element selector. (a) False (b) True
11.✍️ How many declarations (property: value pairs) are in this rule?
li {
font-style: italic;
}
12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
13.🖌️ What colour are the letters?
p {
  font-size: 20px;
  color: purple;
  background-color: red;
  text-align: right;
} (a) red (b) purple (c) blue
14.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 2 (d) 1
15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
16.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 180px;
  padding: 10px;
  border: 2px solid black;
  margin: 5px;
}
17.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
18.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the viewport meta tag (d) the title tag
19.✍️ What value is given to font-size in this rule?
.note {
  font-size: 20px;
  text-align: center;
  border: 2px solid;
  font-weight: bold;
} (a) yellow (b) center (c) 20px (d) font-size
20.✍️ What value is given to text-align in this rule?
#top {
  width: 300px;
  text-align: center;
  font-weight: bold;
  background-color: yellow;
} (a) yellow (b) center (c) 10px (d) text-align
21.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
margin: 10px;
}
22.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
23.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 90px;
  justify-content: space-between;
}
Inside are 2 boxes, each 40px wide (no margins).
24.🖌️ How big is the text, in px?
h2 {
  background-color: blue;
  color: white;
  font-size: 32px;
  text-align: left;
}
25.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) makes a form box (d) changes the text size
26.⚖️ What colour is the text of this element?
<h2 class="box" id="hero">Hi</h2>
CSS:
#hero { color: orange; }
#hero { color: yellow; } (a) orange (b) white (c) blue (d) yellow
27.⚖️ What colour is the text of this element?
<p class="note" id="top">Hi</p>
CSS:
p { color: orange; }
p { color: purple; } (a) black (b) green (c) orange (d) purple
28.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) reacts to a button click (d) puts a picture on a page
29.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
30.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
width: 300px;
text-align: center;
}
31.✍️ What value is given to border in this rule?
.box {
font-size: 20px;
border: 2px solid;
} (a) italic (b) border (c) 300px (d) 2px solid
32.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
33.✍️ How many declarations (property: value pairs) are in this rule?
#top {
  font-size: 20px;
  color: red;
  padding: 8px;
}
34.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) no pages (d) only one word
35.🎯 Which element does the selector .star style? (a) <span class="star"> (b) <span id="star"> (c) <p class="note"> (d) <span class="menu">
36.Which of these does HTML do? (a) rounds box corners (b) sets colours and fonts (c) gives the page structure (d) changes the text size
37.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
38.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
39.⚖️ What colour is the text of this element?
<h1 class="big" id="top">Hi</h1>
CSS:
#top { color: blue; }
#top { color: green; } (a) red (b) blue (c) purple (d) green
40.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 160px;
  justify-content: flex-end;
}
Inside are 2 boxes, each 50px wide (no margins).

Answer key

red
body
93
255
h2
green
color
p
Yes
True
1
14
purple
1
the later one
214
an id selector
the viewport meta tag
20px
center
1
color
10
32
makes a form box
yellow
purple
changes the text size
600px or narrower
2
2px solid
JavaScript
3
many pages
<span class="star">
gives the page structure
the screen width
fits every screen
green
60

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