CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 949 · 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 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 6px;
     }
   }
2. 2.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes
3. 3.What does color do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) sets the letter colour
4. 4.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) center (c) flex-end (d) space-between
5. 5.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black
6. 6.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
7. 7.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-weight (d) font-size
8. 8.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
9. 9.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
10. 10.🖌️ Which CSS property sets the letter colour? (a) font-family (b) color (c) font-weight (d) background-color
11. 11.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) lays out the page (d) gives the page structure
12. 12.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: orange; } (a) red (b) green (c) white (d) orange
13. 13.📦 In the box model, which part is the gap round content? (a) margin (b) content (c) padding (d) border
14. 14.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) content (c) padding (d) border
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    p { color: yellow; }
    .big { color: white; }
    #main { color: purple; } (a) green (b) yellow (c) purple (d) white
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 30px;
      border: 2px solid black;
      margin: 0px;
    }
17. 17.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    #main { color: orange; }
    h2 { color: blue; } (a) red (b) blue (c) orange (d) white
18. 18.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
19. 19.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
20. 20.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
21. 21.🖌️ How big is the text, in px?
    p {
      color: orange;
      text-align: center;
      background-color: green;
      font-size: 24px;
    }
22. 22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 5px;
      border: 2px solid black;
      margin: 15px;
    }
23. 23.🖌️ How big is the text, in px?
    p {
      color: blue;
      background-color: orange;
      text-align: left;
      font-size: 32px;
    }
24. 24.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
25. 25.✍️ What value is given to margin in this rule?
    body {
      margin: 10px;
      background-color: yellow;
      font-weight: bold;
      padding: 8px;
    } (a) 8px (b) 10px (c) bold (d) margin
26. 26.🖌️ Which CSS property makes the text bold? (a) font-size (b) background-color (c) text-align (d) font-weight
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
28. 28.🎯 Which element does the selector div style? (a) <p class="star"> (b) <h1 id="main"> (c) <span> (d) <div class="star">
29. 29.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
30. 30.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }
31. 31.🔍 Which is the odd one out? (a) reacts to a button click (b) gives the page structure (c) makes headings and lists (d) makes a link
32. 32.🎯 Can many elements share the same class? (a) No (b) Yes
33. 33.🎯 Which sign starts an id selector? (a) & (b) # (c) @ (d) .
34. 34.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
35. 35.Which of these does HTML do? (a) counts down a timer (b) makes headings and lists (c) adds space around boxes (d) shows a pop-up message
36. 36.🔍 Which is the odd one out? (a) sets colours and fonts (b) shows a pop-up message (c) reacts to a button click (d) changes the page live
37. 37.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
38. 38.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) black (c) cyan (d) red
39. 39.🌈 Which hex code is white? (a) #ffff00 (b) #00ff00 (c) #0000ff (d) #ffffff
40. 40.🌈 Which colour of light is strongest in rgb(187, 104, 26)? (a) red (b) blue (c) green

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