CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 103 · 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 language makes a link? (a) CSS (b) HTML (c) JavaScript
2. 2.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) center (c) space-between (d) flex-end
3. 3.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 4 (c) 2 (d) 6
4. 4.🌈 Which colour of light is strongest in rgb(121, 4, 243)? (a) red (b) green (c) blue
5. 5.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     background-color: yellow;
   }
7. 7.🌈 Which hex code is white? (a) #ff00ff (b) #000000 (c) #ffffff (d) #00ff00
8. 8.🌈 Which colour of light is strongest in rgb(213, 66, 113)? (a) red (b) blue (c) green
9. 9.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) background-color (d) text-align
10. 10.Which of these does HTML do? (a) changes the page live (b) checks a quiz answer (c) changes the text size (d) makes a link
11. 11.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: red; }
    p { color: yellow; }
    #top { color: green; } (a) purple (b) red (c) green (d) yellow
12. 12.🎯 Which CSS selector matches this element?
    <li class="star" id="end">Hello</li> (a) li (b) .end (c) .menu (d) div
13. 13.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) blue (c) magenta (d) white
14. 14.🎯 Which element does the selector .star style? (a) <h1 id="star"> (b) <h2 class="note"> (c) <h1 class="menu"> (d) <h1 class="star">
15. 15.True or false: #logo is a class selector. (a) False (b) True
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 30px;
      border: 4px solid black;
      margin: 20px;
    }
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
    }
18. 18.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
19. 19.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
20. 20.🌈 Which colour is #000000? (a) red (b) black (c) blue (d) bright green
21. 21.True or false: the content is the text or picture. (a) True (b) False
22. 22.🔍 Which is the odd one out? (a) shows a pop-up message (b) checks a quiz answer (c) counts down a timer (d) rounds box corners
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
24. 24.🎯 Which CSS selector matches this element?
    <div class="box" id="top">Hello</div> (a) .star (b) #top (c) span (d) .top
25. 25.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) margin (d) padding
26. 26.Which of these is the content? (a) the gap to other boxes (b) a solid or dotted edge (c) space outside the border (d) the text or picture
27. 27.What does font-family do? (a) sets the letter colour (b) makes the text bold (c) picks the font style (d) colours behind the text
28. 28.True or false: CSS lays out the page. (a) False (b) True
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
30. 30.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
32. 32.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) #top (b) #intro (c) #big (d) .top
33. 33.🖌️ Which CSS property colours behind the text? (a) text-align (b) color (c) font-weight (d) background-color
34. 34.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    #hero { color: blue; }
    h2 { color: green; } (a) green (b) orange (c) yellow (d) blue
35. 35.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
37. 37.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
38. 38.🎯 Can many elements share the same class? (a) No (b) Yes
39. 39.True or false: padding is space inside the border. (a) True (b) False
40. 40.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes letters bigger (d) picks the font style

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