CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 517 · 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 of these does HTML do? (a) makes a link (b) changes the text size (c) adds space around boxes (d) sets colours and fonts
2. 2.🔍 Which is the odd one out? (a) adds space around boxes (b) counts down a timer (c) changes the page live (d) shows a pop-up message
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 110px;
     padding: 20px;
     border: 1px solid black;
     margin: 20px;
   }
4. 4.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
5. 5.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Cascading Style Sheets (d) Computer Style Sheets
6. 6.✍️ Which property is set to red in this rule?
   p {
     color: red;
     background-color: yellow;
     font-weight: bold;
   } (a) color (b) text-align (c) red (d) font-size
7. 7.🌈 Which colour of light is strongest in rgb(7, 22, 204)? (a) green (b) red (c) blue
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     text-align: center;
     font-style: italic;
     border: 2px solid;
     color: red;
   }
9. 9.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
10. 10.Which of these is margin? (a) the line round the box (b) space outside the border (c) the text or picture (d) space inside the border
11. 11.🔍 Which is the odd one out? (a) counts down a timer (b) makes headings and lists (c) reacts to a button click (d) changes the page live
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
13. 13.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
14. 14.True or false: li is a class selector. (a) True (b) False
15. 15.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    .box { color: black; }
    .box { color: yellow; } (a) red (b) green (c) black (d) yellow
16. 16.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      text-align: center;
    }
18. 18.🎯 Which element does the selector .note style? (a) <h2 class="big"> (b) <h2 class="note"> (c) <h2 id="note"> (d) <li class="red">
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
20. 20.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      font-size: 20px;
      background-color: black;
      color: blue;
    } (a) black (b) blue (c) green
21. 21.True or false: the content is the text or picture. (a) False (b) True
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
    }
23. 23.Which of these is padding? (a) a solid or dotted edge (b) space outside the border (c) space inside the border (d) the gap to other boxes
24. 24.✍️ What value is given to margin in this rule?
    h2 {
      margin: 10px;
      padding: 8px;
    } (a) 8px (b) 10px (c) margin (d) bold
25. 25.True or false: h1 is an element selector. (a) True (b) False
26. 26.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: yellow; }
    #top { color: orange; } (a) yellow (b) blue (c) purple (d) orange
27. 27.🖌️ What colour is behind the letters?
    p {
      color: purple;
      font-size: 12px;
      background-color: white;
      text-align: left;
    } (a) purple (b) orange (c) white
28. 28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
29. 29.🖌️ Which CSS property makes the text bold? (a) font-size (b) background-color (c) text-align (d) font-weight
30. 30.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) center (c) flex-start (d) space-between
31. 31.🎯 Which element does the selector .note style? (a) <span class="red"> (b) <div class="big"> (c) <div class="note"> (d) <div id="note">
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
33. 33.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
34. 34.✍️ Which property is set to center in this rule?
    .box {
      text-align: center;
      font-style: italic;
    } (a) text-align (b) background-color (c) margin (d) center
35. 35.🎯 Which sign starts an id selector? (a) . (b) # (c) & (d) @
36. 36.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
37. 37.True or false: body is an id selector. (a) True (b) False
38. 38.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
39. 39.🖌️ What colour are the letters?
    li {
      color: orange;
      background-color: yellow;
      font-size: 20px;
      text-align: center;
    } (a) orange (b) blue (c) yellow
40. 40.🖌️ Which CSS property centres a heading? (a) color (b) text-align (c) font-family (d) font-size

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