CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 659 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 100px;
     padding: 25px;
     border: 3px solid black;
     margin: 5px;
   }
2. 2.✍️ Which property is set to center in this rule?
   p {
     background-color: yellow;
     width: 300px;
     margin: 10px;
     text-align: center;
   } (a) text-align (b) margin (c) center (d) background-color
3. 3.Which of these is the content? (a) space outside the border (b) space inside the border (c) the line round the box (d) the text or picture
4. 4.Which of these does CSS do? (a) changes the page live (b) reacts to a button click (c) lays out the page (d) makes a link
5. 5.🔍 Which is the odd one out? (a) makes a form box (b) lays out the page (c) makes headings and lists (d) makes a link
6. 6.✍️ What is the selector in this CSS rule?
   h1 {
     font-size: 20px;
     background-color: yellow;
   } (a) yellow (b) p (c) font-size (d) h1
7. 7.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
8. 8.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   }
9. 9.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
10. 10.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
11. 11.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    } (a) Yes (b) No
12. 12.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) many pages (d) no pages
13. 13.Which of these does HTML do? (a) lays out the page (b) checks a quiz answer (c) makes headings and lists (d) changes the text size
14. 14.✍️ In color: blue; which part is the value? (a) blue (b) color (c) ; (d) :
15. 15.What does background-color do? (a) centres a heading (b) makes the text bold (c) colours behind the text (d) makes letters bigger
16. 16.🖌️ What colour are the letters?
    li {
      font-size: 40px;
      text-align: center;
      background-color: blue;
      color: red;
    } (a) blue (b) red (c) white
17. 17.✍️ Which property is set to center in this rule?
    .note {
      font-size: 20px;
      background-color: yellow;
      margin: 10px;
      text-align: center;
    } (a) margin (b) center (c) background-color (d) text-align
18. 18.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
19. 19.True or false: .menu is an id selector. (a) False (b) True
20. 20.True or false: padding is the gap round content. (a) False (b) True
21. 21.🌈 In #00f200 the green part is the hex number f2. What is it as a normal number?
22. 22.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
23. 23.🖌️ Which CSS property makes letters bigger? (a) font-size (b) font-weight (c) font-family (d) color
24. 24.🎯 Which sign starts an id selector? (a) # (b) . (c) @ (d) &
25. 25.🖌️ What colour is behind the letters?
    p {
      font-size: 28px;
      text-align: right;
      background-color: yellow;
      color: purple;
    } (a) purple (b) white (c) yellow
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
    }
27. 27.Which of these does HTML do? (a) sets colours and fonts (b) adds space around boxes (c) rounds box corners (d) makes a link
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      border: 2px solid;
    }
29. 29.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
30. 30.🖌️ Which CSS property colours behind the text? (a) color (b) background-color (c) font-size (d) font-weight
31. 31.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 370px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
32. 32.✍️ What is the selector in this CSS rule?
    body {
      text-align: center;
      width: 300px;
      font-style: italic;
    } (a) text-align (b) 300px (c) .box (d) body
33. 33.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) makes headings and lists (d) reacts to a button click
34. 34.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
35. 35.✍️ How does a CSS comment start? (a) /* (b) # (c) <!-- (d) //
36. 36.🌈 Which colour is rgb(0, 0, 0)? (a) red (b) yellow (c) blue (d) black
37. 37.💪 Which flexbox property sets space between boxes? (a) display: flex (b) align-items (c) justify-content (d) gap
38. 38.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="main">Hello</h1> (a) h2 (b) #logo (c) .main (d) #main
39. 39.🌈 Which colour of light is strongest in rgb(244, 108, 34)? (a) red (b) green (c) blue
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      border: 2px solid;
      color: red;
    }

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