CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 297 · 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.⚖️ What colour is the text of this element?
   <h2 class="box" id="intro">Hi</h2>
   CSS:
   #intro { color: blue; }
   #intro { color: green; } (a) blue (b) green (c) black (d) white
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: center;
   }
   Inside are 3 boxes, each 40px wide (no margins).
3. 3.🧩 Which language puts a picture on a page? (a) JavaScript (b) HTML (c) CSS
4. 4.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
5. 5.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-family (c) color (d) font-size
6. 6.🖌️ How big is the text, in px?
   li {
     color: orange;
     font-size: 32px;
     text-align: center;
     background-color: yellow;
   }
7. 7.⚖️ What colour is the text of this element?
   <h1 class="note" id="main">Hi</h1>
   CSS:
   h1 { color: yellow; }
   h1 { color: green; } (a) yellow (b) red (c) green (d) orange
8. 8.🎯 Which CSS selector matches this element?
   <li class="star" id="intro">Hello</li> (a) div (b) .intro (c) #intro (d) #main
9. 9.🧩 Which language changes the text size? (a) CSS (b) HTML (c) JavaScript
10. 10.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
11. 11.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
12. 12.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) : (d) color
13. 13.Which of these does JavaScript do? (a) adds space around boxes (b) makes headings and lists (c) sets colours and fonts (d) shows a pop-up message
14. 14.🔍 Which is the odd one out? (a) shows a pop-up message (b) adds space around boxes (c) sets colours and fonts (d) lays out the page
15. 15.Which of these is margin? (a) the line round the box (b) space inside the border (c) the text or picture (d) space outside the border
16. 16.📦 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: 30px;
      border: 5px solid black;
      margin: 0px;
    }
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
    }
18. 18.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
19. 19.True or false: CSS gives the page structure. (a) False (b) True
20. 20.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
22. 22.🎯 Which element does the selector h2 style? (a) <h2 class="box"> (b) <li> (c) <span id="main"> (d) <div class="box">
23. 23.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
24. 24.🖌️ Where does the text sit on its line?
    li {
      font-size: 12px;
      color: blue;
      text-align: center;
      background-color: red;
    } (a) on the right (b) on the left (c) in the middle
25. 25.True or false: .note is a class selector. (a) True (b) False
26. 26.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-size (c) font-family (d) background-color
27. 27.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
28. 28.Which of these does HTML do? (a) reacts to a button click (b) changes the page live (c) lays out the page (d) puts a picture on a page
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 530px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
30. 30.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
31. 31.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
32. 32.Which of these does HTML do? (a) counts down a timer (b) makes headings and lists (c) reacts to a button click (d) changes the page live
33. 33.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: yellow; }
    #end { color: green; } (a) blue (b) red (c) green (d) yellow
34. 34.🌈 In #210000 the red part is the hex number 21. What is it as a normal number?
35. 35.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
36. 36.🎯 Which element does the selector .note style? (a) <h2 class="red"> (b) <h1 class="big"> (c) <h1 id="note"> (d) <h1 class="note">
37. 37.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) #intro (b) .top (c) h2 (d) #note
38. 38.True or false: padding is the gap round content. (a) True (b) False
39. 39.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
40. 40.✍️ How does a CSS comment start? (a) /* (b) # (c) // (d) <!--

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