CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 788 · 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.🖌️ What colour is behind the letters?
   h2 {
     background-color: white;
     text-align: right;
     font-size: 28px;
     color: black;
   } (a) white (b) orange (c) black
2. 2.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
3. 3.Which of these is the content? (a) the gap round content (b) space outside the border (c) a solid or dotted edge (d) the text or picture
4. 4.🔍 Which is the odd one out? (a) sets colours and fonts (b) shows a pop-up message (c) lays out the page (d) changes the text size
5. 5.What does justify-content: flex-end 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
6. 6.Which of these does JavaScript do? (a) gives the page structure (b) checks a quiz answer (c) adds space around boxes (d) rounds box corners
7. 7.True or false: CSS gives the page structure. (a) False (b) True
8. 8.🖌️ Which CSS property makes letters bigger? (a) font-size (b) font-family (c) font-weight (d) text-align
9. 9.True or false: the border is the line round the box. (a) True (b) False
10. 10.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
12. 12.What does background-color do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) centres a heading
13. 13.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
14. 14.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
15. 15.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
16. 16.True or false: #top is a class selector. (a) True (b) False
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      border: 2px solid;
      padding: 8px;
      margin: 10px;
    }
18. 18.🌈 Which hex code is red? (a) #ff0000 (b) #000000 (c) #00ffff (d) #0000ff
19. 19.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 16px;
      color: orange;
      text-align: center;
      background-color: purple;
    } (a) in the middle (b) on the right (c) on the left
20. 20.True or false: CSS checks a quiz answer. (a) True (b) False
21. 21.🌈 Which hex code is bright green? (a) #ffffff (b) #ffff00 (c) #00ff00 (d) #00ffff
22. 22.True or false: margin is the gap to other boxes. (a) False (b) True
23. 23.🔍 Which is the odd one out? (a) counts down a timer (b) rounds box corners (c) changes the page live (d) reacts to a button click
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
25. 25.🖌️ What colour are the letters?
    h2 {
      font-size: 12px;
      background-color: yellow;
      color: green;
      text-align: center;
    } (a) blue (b) green (c) yellow
26. 26.🌈 In #0000ec the blue part is the hex number ec. What is it as a normal number?
27. 27.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) sets colours and fonts (d) makes a link
28. 28.🌈 Which colour is #00ff00? (a) red (b) blue (c) bright green (d) magenta
29. 29.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) adds space around boxes (d) gives the page structure
30. 30.🎯 Which CSS selector matches this element?
    <li class="star" id="logo">Hello</li> (a) .menu (b) .star (c) .logo (d) #star
31. 31.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
32. 32.What does font-weight do? (a) sets the letter colour (b) picks the font style (c) makes the text bold (d) makes letters bigger
33. 33.🎯 Which sign starts a class selector? (a) @ (b) & (c) # (d) .
34. 34.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
35. 35.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 32px;
      color: blue;
      text-align: left;
      background-color: yellow;
    } (a) in the middle (b) on the right (c) on the left
36. 36.🎯 Which CSS selector matches this element?
    <li class="box" id="intro">Hello</li> (a) .intro (b) #box (c) .star (d) li
37. 37.🌈 Which colour is #000000? (a) bright green (b) cyan (c) black (d) red
38. 38.🎯 Which element does the selector .red style? (a) <p class="box"> (b) <h1 class="star"> (c) <p id="red"> (d) <p class="red">
39. 39.Which of these does JavaScript do? (a) gives the page structure (b) changes the text size (c) makes a link (d) reacts to a button click
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).

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