CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 986 · 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.🔍 Which is the odd one out? (a) sets colours and fonts (b) changes the page live (c) reacts to a button click (d) counts down a timer
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     color: red;
     margin: 10px;
   }
3. 3.True or false: the border is space inside the border. (a) True (b) False
4. 4.🖌️ What colour is behind the letters?
   h1 {
     background-color: green;
     font-size: 12px;
     text-align: right;
     color: blue;
   } (a) green (b) purple (c) blue
5. 5.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 12px;
     }
   }
6. 6.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 110px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 40px wide (no margins).
7. 7.📱 What does a media query check? (a) the page title (b) the battery level (c) the screen width (d) the time of day
8. 8.✍️ What is the selector in this CSS rule?
   h2 {
     border: 2px solid;
     color: red;
   } (a) h1 (b) red (c) h2 (d) border
9. 9.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
10. 10.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      color: blue;
      font-size: 36px;
      text-align: left;
    } (a) red (b) blue (c) black
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
12. 12.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
13. 13.✍️ Which property is set to 20px in this rule?
    #top {
      padding: 8px;
      font-size: 20px;
      font-weight: bold;
      font-style: italic;
    } (a) 20px (b) text-align (c) background-color (d) font-size
14. 14.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
15. 15.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
16. 16.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
17. 17.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
18. 18.🖌️ What colour are the letters?
    h2 {
      text-align: center;
      font-size: 16px;
      color: orange;
      background-color: white;
    } (a) white (b) orange (c) purple
19. 19.🌈 Which colour of light is strongest in rgb(232, 11, 72)? (a) red (b) blue (c) green
20. 20.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) color (d) background-color
21. 21.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
22. 22.True or false: margin is the text or picture. (a) True (b) False
23. 23.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
24. 24.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) margin (d) border
25. 25.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) center (c) flex-end (d) space-between
26. 26.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the gap round content (d) the text or picture
27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 5px;
      border: 4px solid black;
      margin: 10px;
    }
28. 28.True or false: the border is the text or picture. (a) True (b) False
29. 29.What does font-size do? (a) centres a heading (b) picks the font style (c) makes letters bigger (d) makes the text bold
30. 30.🧩 Which language counts down a timer? (a) HTML (b) CSS (c) JavaScript
31. 31.Which of these does HTML do? (a) makes headings and lists (b) reacts to a button click (c) lays out the page (d) changes the text size
32. 32.🎯 What kind of selector is #end? (a) an id selector (b) an element selector (c) a class selector
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
34. 34.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
35. 35.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
36. 36.Which of these is margin? (a) the text or picture (b) the line round the box (c) the gap to other boxes (d) a solid or dotted edge
37. 37.🎯 Which CSS selector matches this element?
    <li class="star" id="top">Hello</li> (a) #star (b) #intro (c) .menu (d) #top
38. 38.Which of these does CSS do? (a) checks a quiz answer (b) makes a form box (c) makes a link (d) sets colours and fonts
39. 39.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    .red { color: red; }
    #hero { color: orange; }
    h1 { color: black; } (a) red (b) black (c) orange (d) blue
40. 40.True or false: #hero is an id selector. (a) False (b) True

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