CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 84 · 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.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   }
2. 2.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
3. 3.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
4. 4.✍️ In color: blue; which part is the property? (a) : (b) blue (c) ; (d) color
5. 5.🌈 Which colour is #0000ff? (a) bright green (b) blue (c) cyan (d) red
6. 6.✍️ What value is given to font-size in this rule?
   h2 {
     font-style: italic;
     text-align: center;
     font-size: 20px;
   } (a) 20px (b) yellow (c) center (d) font-size
7. 7.📦 In the box model, which part is space inside the border? (a) margin (b) content (c) border (d) padding
8. 8.🌈 Which colour of light is strongest in rgb(220, 53, 0)? (a) red (b) green (c) blue
9. 9.🖌️ Which CSS property colours behind the text? (a) text-align (b) background-color (c) color (d) font-size
10. 10.✍️ What value is given to text-align in this rule?
    h1 {
      text-align: center;
      width: 300px;
      border: 2px solid;
    } (a) 10px (b) center (c) yellow (d) text-align
11. 11.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) gives the page structure (d) changes the page live
12. 12.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
13. 13.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
14. 14.🌈 Which colour is #000000? (a) yellow (b) white (c) black (d) magenta
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
16. 16.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
17. 17.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
18. 18.True or false: CSS checks a quiz answer. (a) False (b) True
19. 19.True or false: margin is the text or picture. (a) True (b) False
20. 20.🖌️ Which CSS property centres a heading? (a) font-size (b) text-align (c) background-color (d) color
21. 21.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) justify-content (c) flex-direction (d) align-items
22. 22.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) margin (c) border (d) content
23. 23.Which of these is the content? (a) space outside the border (b) the text or picture (c) the line round the box (d) the gap round content
24. 24.✍️ Which property is set to bold in this rule?
    .note {
      font-weight: bold;
      background-color: yellow;
      padding: 8px;
    } (a) border (b) width (c) font-weight (d) bold
25. 25.🎯 Which CSS selector matches this element?
    <p class="red" id="logo">Hello</p> (a) h1 (b) .box (c) .logo (d) #logo
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      border: 2px solid;
      text-align: center;
      font-style: italic;
      font-size: 20px;
    }
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
28. 28.🎯 Which sign starts an id selector? (a) @ (b) & (c) # (d) .
29. 29.🌈 Which colour of light is strongest in rgb(40, 157, 12)? (a) blue (b) red (c) green
30. 30.🔍 Which is the odd one out? (a) changes the text size (b) makes headings and lists (c) gives the page structure (d) puts a picture on a page
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 25px;
      border: 2px solid black;
      margin: 15px;
    }
32. 32.🧩 Which language counts down a timer? (a) JavaScript (b) HTML (c) CSS
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-weight: bold;
    }
34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
35. 35.🖌️ Which CSS property makes letters bigger? (a) text-align (b) color (c) font-size (d) font-family
36. 36.🎯 Which CSS selector matches this element?
    <span class="red" id="end">Hello</span> (a) p (b) .end (c) span (d) #red
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
38. 38.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    .note { color: yellow; }
    #main { color: red; }
    h1 { color: blue; } (a) yellow (b) purple (c) red (d) blue
39. 39.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
40. 40.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: red; } (a) black (b) orange (c) white (d) red

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