CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 456 · 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.True or false: margin is a solid or dotted edge. (a) False (b) True
2.🌈 Which hex code is red? (a) #ffffff (b) #ff0000 (c) #00ffff (d) #ff00ff
3.🖌️ What colour are the letters?
p {
  color: purple;
  text-align: left;
  background-color: red;
  font-size: 40px;
} (a) purple (b) blue (c) red
4.🖌️ What colour are the letters?
h1 {
  font-size: 20px;
  background-color: green;
  text-align: left;
  color: purple;
} (a) green (b) purple (c) black
5.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 1024px) {
  p {
    font-size: 28px;
  }
} (a) Yes (b) No
6.🔍 Which is the odd one out? (a) shows a pop-up message (b) makes a link (c) makes a form box (d) makes headings and lists
7.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 14px;
  }
} (a) No (b) Yes
8.🎨 Which attribute adds CSS inside one tag? (a) style (b) alt (c) src (d) href
9.🎯 Which element does the selector .menu style? (a) <span id="menu"> (b) <p class="big"> (c) <span class="menu"> (d) <span class="note">
10.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    font-size: 16px;
  }
}
11.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) bright green (c) black (d) cyan
12.True or false: CSS makes headings and lists. (a) True (b) False
13.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
p {
  font-size: 20px;
}
@media (min-width: 768px) {
  p {
    font-size: 26px;
  }
}
14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 20px;
  }
}
15.🔍 Which is the odd one out? (a) makes a form box (b) makes a link (c) counts down a timer (d) gives the page structure
16.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
p {
  font-size: 24px;
}
@media (min-width: 768px) {
  p {
    font-size: 30px;
  }
}
17.🖌️ What colour is behind the letters?
li {
  text-align: center;
  color: yellow;
  background-color: green;
  font-size: 12px;
} (a) blue (b) green (c) yellow
18.✍️ Which property is set to 300px in this rule?
.box {
font-size: 20px;
width: 300px;
} (a) width (b) font-style (c) 300px (d) color
19.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (max-width: 1024px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
20.⚖️ What colour is the text of this element?
<h2 class="big" id="main">Hi</h2>
CSS:
#main { color: black; }
#main { color: purple; } (a) black (b) purple (c) red (d) yellow
21.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) bright green (c) cyan (d) yellow
22.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 120px;
  justify-content: space-between;
}
Inside are 2 boxes, each 50px wide (no margins).
23.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
24.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 190px;
  justify-content: space-between;
}
Inside are 3 boxes, each 50px wide (no margins).
25.⚖️ What colour is the text of this element?
<h2 class="menu" id="hero">Hi</h2>
CSS:
h2 { color: red; }
#hero { color: orange; } (a) blue (b) orange (c) red (d) purple
26.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 120px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 50px wide (no margins).
27.🔍 Which is the odd one out? (a) puts a picture on a page (b) sets colours and fonts (c) makes a link (d) gives the page structure
28.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) = (d) -
29.True or false: the content is the text or picture. (a) True (b) False
30.📱 The screen is 375px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 480px) {
  p {
    font-size: 26px;
  }
} (a) No (b) Yes
31.🌈 Which colour of light is strongest in rgb(85, 151, 110)? (a) red (b) blue (c) green
32.✍️ How many declarations (property: value pairs) are in this rule?
h2 {
  color: red;
  text-align: center;
  width: 300px;
}
33.⚖️ What colour is the text of this element?
<p class="star" id="hero">Hi</p>
CSS:
#hero { color: orange; }
p { color: blue; }
.star { color: red; } (a) red (b) purple (c) blue (d) orange
34.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) blue (c) bright green (d) black
35.Which of these is the content? (a) space inside the border (b) the text or picture (c) a solid or dotted edge (d) the gap to other boxes
36.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 100 (c) 255 (d) 1000
37.💪 Which flexbox property turns on flexbox? (a) justify-content (b) display: flex (c) align-items (d) flex-direction
38.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
39.⚖️ What colour is the text of this element?
<h1 class="big" id="hero">Hi</h1>
CSS:
h1 { color: white; }
#hero { color: yellow; } (a) red (b) purple (c) yellow (d) white
40.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <style> (d) <script>

Answer key

False
#ff0000
purple
purple
No
shows a pop-up message
No
style
<span class="menu">
16
cyan
False
20
20
counts down a timer
24
green
width
Yes
purple
bright green
20
fits every screen
20
orange
20
sets colours and fonts
:
True
No
green
3
orange
yellow
the text or picture
255
display: flex
JavaScript
yellow
<style>

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