CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 592 · 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.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) red (d) green
2.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 4 (d) 3
3.💪 How wide (px) is each gap between two boxes?
.row {
  display: flex;
  width: 270px;
  justify-content: space-between;
}
Inside are 2 boxes, each 100px wide (no margins).
4.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 8px;
  }
}
5.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) many pages (d) only one image
6.📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 140px;
  padding: 15px;
  border: 1px solid black;
  margin: 15px;
}
7.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
8.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) justify-content (c) display: flex (d) gap
9.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) margin (d) content
10.✍️ Which property is set to yellow in this rule?
.note {
  font-style: italic;
  color: red;
  background-color: yellow;
} (a) yellow (b) background-color (c) margin (d) padding
11.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
12.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
13.📱 The screen is 320px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (min-width: 1024px) {
  p {
    font-size: 22px;
  }
} (a) No (b) Yes
14.✍️ Which property is set to 300px in this rule?
.box {
  font-weight: bold;
  width: 300px;
  color: red;
} (a) color (b) font-style (c) width (d) 300px
15.🖌️ Where does the text sit on its line?
li {
  background-color: white;
  color: orange;
  text-align: right;
  font-size: 24px;
} (a) in the middle (b) on the left (c) on the right
16.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
17.🖌️ Where does the text sit on its line?
p {
  color: blue;
  font-size: 24px;
  text-align: left;
  background-color: red;
} (a) on the right (b) on the left (c) in the middle
18.Which of these does CSS do? (a) makes headings and lists (b) puts a picture on a page (c) changes the text size (d) counts down a timer
19.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
p {
  font-size: 16px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
}
20.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
21.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) text-align (d) background-color
22.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) center (d) flex-end
23.🎯 Can many elements share the same class? (a) Yes (b) No
24.✍️ CSS declarations go inside which brackets? (a) { } (b) < > (c) [ ] (d) ( )
25.🖌️ What colour is behind the letters?
h1 {
  background-color: black;
  text-align: center;
  color: green;
  font-size: 40px;
} (a) black (b) yellow (c) green
26.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
27.⚖️ What colour is the text of this element?
<p class="big" id="hero">Hi</p>
CSS:
p { color: purple; }
.big { color: red; } (a) red (b) white (c) black (d) purple
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: 70px;
  padding: 5px;
  border: 1px solid black;
  margin: 10px;
}
29.🖌️ What colour is behind the letters?
li {
  text-align: right;
  background-color: black;
  color: green;
  font-size: 12px;
} (a) green (b) orange (c) black
30.📱 The screen is 540px wide. Does the rule inside @media apply?
p {
  font-size: 20px;
}
@media (max-width: 480px) {
  p {
    font-size: 14px;
  }
} (a) No (b) Yes
31.📱 The screen is 700px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
} (a) No (b) Yes
32.🎯 What kind of selector is h1? (a) a class selector (b) an id selector (c) an element selector
33.What does color do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) picks the font style
34.✍️ What value is given to margin in this rule?
body {
  font-weight: bold;
  margin: 10px;
  text-align: center;
} (a) bold (b) 10px (c) 8px (d) margin
35.✍️ What value is given to width in this rule?
p {
font-size: 20px;
width: 300px;
} (a) italic (b) 300px (c) width (d) red
36.🎨 Which tag holds CSS inside the head? (a) <style> (b) <css> (c) <script> (d) <body>
37.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
38.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
p {
  font-size: 12px;
}
@media (max-width: 768px) {
  p {
    font-size: 10px;
  }
}
39.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
40.✍️ What is the selector in this CSS rule?
h2 {
  border: 2px solid;
  background-color: yellow;
  font-size: 20px;
} (a) yellow (b) h2 (c) h1 (d) border

Answer key

blue
3
70
12
many pages
202
the later one
gap
padding
background-color
red
255
No
width
on the right
the viewport meta tag
on the left
changes the text size
16
center
font-family
flex-start
Yes
{ }
black
.
red
82
black
No
Yes
an element selector
sets the letter colour
10px
300px
<style>
Cascading Style Sheets
10
a class selector
h2

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