CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 355 · 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.

1. 1.True or false: CSS sets colours and fonts. (a) False (b) True
2. 2.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
3. 3.🎯 Which element does the selector h2 style? (a) <span id="main"> (b) <h2 class="menu"> (c) <li> (d) <div class="menu">
4. 4.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
5. 5.What does font-family do? (a) colours behind the text (b) sets the letter colour (c) centres a heading (d) picks the font style
6. 6.⚖️ What colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   .red { color: blue; }
   .red { color: red; } (a) green (b) blue (c) black (d) red
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 290px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 60px wide (no margins).
8. 8.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) blue (c) white (d) black
9. 9.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   p { color: white; }
   p { color: purple; } (a) white (b) red (c) green (d) purple
10. 10.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: white; } (a) black (b) blue (c) orange (d) white
11. 11.💪 Which flexbox property lines boxes up across? (a) gap (b) flex-direction (c) display: flex (d) align-items
12. 12.🔍 Which is the odd one out? (a) lays out the page (b) sets colours and fonts (c) adds space around boxes (d) counts down a timer
13. 13.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
14. 14.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
15. 15.Which of these does CSS do? (a) sets colours and fonts (b) gives the page structure (c) changes the page live (d) checks a quiz answer
16. 16.📦 In the box model, which part is the line round the box? (a) content (b) padding (c) border (d) margin
17. 17.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) border (d) margin
18. 18.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) align-items (c) gap (d) justify-content
19. 19.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    h1 { color: orange; }
    .red { color: white; } (a) orange (b) white (c) yellow (d) green
20. 20.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
21. 21.✍️ Which property is set to 8px in this rule?
    h1 {
      margin: 10px;
      color: red;
      border: 2px solid;
      padding: 8px;
    } (a) border (b) 8px (c) font-weight (d) padding
22. 22.📦 In the box model, which part is space outside the border? (a) border (b) content (c) margin (d) padding
23. 23.🎯 Which CSS selector matches this element?
    <span class="box" id="main">Hello</span> (a) #logo (b) #main (c) #box (d) p
24. 24.✍️ Which property is set to red in this rule?
    p {
      color: red;
      font-style: italic;
    } (a) red (b) color (c) text-align (d) font-size
25. 25.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
26. 26.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) F (c) G (d) J
27. 27.🖌️ Which CSS property centres a heading? (a) font-size (b) background-color (c) font-weight (d) text-align
28. 28.⚖️ What colour is the text of this element?
    <h1 class="box" id="main">Hi</h1>
    CSS:
    .box { color: purple; }
    .box { color: yellow; } (a) red (b) purple (c) yellow (d) black
29. 29.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) flex-end (d) center
30. 30.🖌️ What colour are the letters?
    h2 {
      font-size: 32px;
      text-align: center;
      background-color: orange;
      color: yellow;
    } (a) orange (b) red (c) yellow
31. 31.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    #intro { color: orange; }
    #intro { color: black; } (a) orange (b) purple (c) green (d) black
33. 33.True or false: margin is a solid or dotted edge. (a) False (b) True
34. 34.🎯 Which CSS selector matches this element?
    <h1 class="box" id="end">Hello</h1> (a) .box (b) #box (c) h2 (d) .end
35. 35.🌈 In #940000 the red part is the hex number 94. What is it as a normal number?
36. 36.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) checks a quiz answer (d) makes headings and lists
37. 37.✍️ What is the selector in this CSS rule?
    h2 {
      background-color: yellow;
      border: 2px solid;
      color: red;
      font-weight: bold;
    } (a) h2 (b) background-color (c) h1 (d) 2px solid
38. 38.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-end (d) flex-start
39. 39.📱 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;
      }
    }
40. 40.⚖️ What colour is the text of this element?
    <h1 class="big" id="logo">Hi</h1>
    CSS:
    #logo { color: purple; }
    .big { color: red; } (a) purple (b) black (c) orange (d) red

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