CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 762 · 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 wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 50px;
     padding: 10px;
     border: 4px solid black;
     margin: 5px;
   }
2. 2.Which of these does HTML do? (a) makes headings and lists (b) lays out the page (c) rounds box corners (d) counts down a timer
3. 3.✍️ What value is given to text-align in this rule?
   li {
     padding: 8px;
     margin: 10px;
     text-align: center;
   } (a) yellow (b) text-align (c) center (d) 10px
4. 4.🎯 Which sign starts an id selector? (a) & (b) . (c) # (d) @
5. 5.True or false: the border is the gap round content. (a) False (b) True
6. 6.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="hero">Hi</p>
   CSS:
   .red { color: blue; }
   .red { color: white; } (a) blue (b) purple (c) orange (d) white
8. 8.🖌️ What colour is behind the letters?
   h1 {
     font-size: 36px;
     text-align: center;
     background-color: blue;
     color: purple;
   } (a) white (b) blue (c) purple
9. 9.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 16px;
     }
   }
10. 10.✍️ What value is given to font-size in this rule?
    .note {
      padding: 8px;
      font-size: 20px;
      color: red;
      text-align: center;
    } (a) yellow (b) center (c) font-size (d) 20px
11. 11.True or false: JavaScript changes the text size. (a) True (b) False
12. 12.🖌️ Where does the text sit on its line?
    h1 {
      background-color: purple;
      text-align: right;
      font-size: 12px;
      color: blue;
    } (a) on the right (b) in the middle (c) on the left
13. 13.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    #end { color: blue; }
    p { color: orange; } (a) blue (b) orange (c) white (d) green
14. 14.✍️ Which property is set to red in this rule?
    .box {
      padding: 8px;
      color: red;
      font-weight: bold;
    } (a) font-size (b) color (c) text-align (d) red
15. 15.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      font-size: 20px;
    } (a) margin (b) h1 (c) h2 (d) 20px
16. 16.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) the gap round content (d) the text or picture
17. 17.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
18. 18.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start
19. 19.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) h1 (b) #intro (c) .top (d) #top
20. 20.🔍 Which is the odd one out? (a) changes the text size (b) shows a pop-up message (c) rounds box corners (d) sets colours and fonts
21. 21.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 490px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
22. 22.🌈 Which colour is #ff0000? (a) white (b) red (c) blue (d) black
23. 23.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      margin: 10px;
      font-style: italic;
    } (a) body (b) 10px (c) width (d) .box
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 450px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
25. 25.📦 In the box model, which part is space inside the border? (a) margin (b) border (c) content (d) padding
26. 26.🎯 Which CSS selector matches this element?
    <p class="star" id="intro">Hello</p> (a) #star (b) p (c) .intro (d) #main
27. 27.🖌️ How big is the text, in px?
    h1 {
      color: white;
      background-color: red;
      text-align: left;
      font-size: 36px;
    }
28. 28.✍️ What is the selector in this CSS rule?
    p {
      font-style: italic;
      padding: 8px;
      font-weight: bold;
    } (a) p (b) font-style (c) 8px (d) .note
29. 29.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-weight (d) text-align
30. 30.True or false: .card is a class selector. (a) False (b) True
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
32. 32.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
33. 33.🔍 Which is the odd one out? (a) sets colours and fonts (b) counts down a timer (c) changes the text size (d) rounds box corners
34. 34.✍️ What is the selector in this CSS rule?
    .box {
      background-color: yellow;
      color: red;
      width: 300px;
      margin: 10px;
    } (a) red (b) background-color (c) .box (d) h2
35. 35.🔍 Which is the odd one out? (a) puts a picture on a page (b) changes the text size (c) gives the page structure (d) makes headings and lists
36. 36.✍️ What is the selector in this CSS rule?
    p {
      margin: 10px;
      text-align: center;
      padding: 8px;
      font-weight: bold;
    } (a) .note (b) margin (c) p (d) center
37. 37.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
38. 38.🎯 What kind of selector is #logo? (a) an element selector (b) an id selector (c) a class selector
39. 39.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) green (d) white
40. 40.True or false: HTML counts down a timer. (a) True (b) False

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