CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 825 · 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 gives the page structure? (a) JavaScript (b) HTML (c) CSS
2. 2.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-size (c) background-color (d) font-weight
3. 3.🌈 Which colour of light is strongest in rgb(130, 210, 10)? (a) blue (b) green (c) red
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 170px;
     justify-content: center;
   }
   Inside are 3 boxes, each 50px wide (no margins).
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
6. 6.🖌️ What colour is behind the letters?
   li {
     font-size: 16px;
     background-color: blue;
     text-align: center;
     color: purple;
   } (a) black (b) blue (c) purple
7. 7.🔍 Which is the odd one out? (a) shows a pop-up message (b) adds space around boxes (c) changes the text size (d) sets colours and fonts
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 80px;
     padding: 20px;
     border: 5px solid black;
     margin: 10px;
   }
9. 9.🖌️ Which CSS property picks the font style? (a) font-family (b) text-align (c) color (d) background-color
10. 10.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
11. 11.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      width: 300px;
      font-size: 20px;
      border: 2px solid;
    } (a) h1 (b) 300px (c) h2 (d) font-style
12. 12.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) red (d) black
13. 13.Which of these is margin? (a) a solid or dotted edge (b) the text or picture (c) space outside the border (d) the gap round content
14. 14.True or false: JavaScript makes a link. (a) True (b) False
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
16. 16.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) the gap round content (d) space outside the border
17. 17.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    .note { color: yellow; } (a) yellow (b) blue (c) purple (d) black
18. 18.True or false: #main is an id selector. (a) False (b) True
19. 19.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
20. 20.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
21. 21.🌈 Which colour is rgb(255, 255, 255)? (a) yellow (b) bright green (c) magenta (d) white
22. 22.🧩 Which language adds space around boxes? (a) JavaScript (b) CSS (c) HTML
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: purple; }
    p { color: blue; } (a) blue (b) purple (c) orange (d) black
24. 24.📱 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;
      }
    }
25. 25.Which of these does CSS do? (a) lays out the page (b) changes the page live (c) shows a pop-up message (d) reacts to a button click
26. 26.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
27. 27.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    .star { color: purple; } (a) yellow (b) blue (c) green (d) purple
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 5px;
      border: 4px solid black;
      margin: 0px;
    }
29. 29.🎯 Which CSS selector matches this element?
    <li class="red" id="main">Hello</li> (a) #logo (b) .main (c) #main (d) #red
30. 30.🖌️ How big is the text, in px?
    h1 {
      color: orange;
      font-size: 36px;
      text-align: left;
      background-color: white;
    }
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
      background-color: yellow;
      font-weight: bold;
    }
32. 32.Which of these does HTML do? (a) changes the text size (b) adds space around boxes (c) lays out the page (d) makes headings and lists
33. 33.🎯 Which CSS selector matches this element?
    <p class="red" id="intro">Hello</p> (a) #main (b) .intro (c) h1 (d) .red
34. 34.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
35. 35.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) picks the font style (d) centres a heading
36. 36.True or false: h1 is an id selector. (a) True (b) False
37. 37.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) - (d) =
38. 38.What does font-family do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes the text bold
39. 39.🌈 Which hex code is bright green? (a) #000000 (b) #0000ff (c) #00ff00 (d) #ffffff
40. 40.💪 Which flexbox property sets space between boxes? (a) display: flex (b) flex-direction (c) gap (d) align-items

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