CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 800 · 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 flexbox property sets space between boxes? (a) align-items (b) justify-content (c) gap (d) flex-direction
2. 2.⚖️ What colour is the text of this element?
   <h1 class="box" id="end">Hi</h1>
   CSS:
   #end { color: white; }
   .box { color: black; }
   h1 { color: green; } (a) black (b) green (c) white (d) blue
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     text-align: center;
   }
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 25px;
     border: 2px solid black;
     margin: 20px;
   }
5. 5.Which of these is the border? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) the line round the box
6. 6.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
7. 7.True or false: body is an id selector. (a) True (b) False
8. 8.🌈 Which colour of light is strongest in rgb(97, 87, 157)? (a) red (b) green (c) blue
9. 9.🎯 Which element does the selector .star style? (a) <li class="note"> (b) <h2 id="star"> (c) <h2 class="star"> (d) <h2 class="menu">
10. 10.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) red (c) cyan (d) bright green
11. 11.✍️ Which property is set to 300px in this rule?
    #top {
      width: 300px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
    } (a) width (b) 300px (c) color (d) font-style
12. 12.Which of these does CSS do? (a) checks a quiz answer (b) reacts to a button click (c) changes the text size (d) changes the page live
13. 13.✍️ Which property is set to 2px solid in this rule?
    h2 {
      border: 2px solid;
      width: 300px;
    } (a) width (b) border (c) font-style (d) 2px solid
14. 14.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
15. 15.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    h1 { color: yellow; }
    .big { color: white; }
    #intro { color: green; } (a) blue (b) white (c) yellow (d) green
16. 16.🖌️ What colour is behind the letters?
    h1 {
      text-align: left;
      font-size: 32px;
      color: black;
      background-color: white;
    } (a) black (b) blue (c) white
17. 17.What does background-color do? (a) makes the text bold (b) colours behind the text (c) makes letters bigger (d) picks the font style
18. 18.🖌️ Where does the text sit on its line?
    li {
      font-size: 20px;
      background-color: green;
      text-align: left;
      color: red;
    } (a) in the middle (b) on the right (c) on the left
19. 19.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    #top { color: red; }
    h1 { color: green; }
    .note { color: yellow; } (a) red (b) yellow (c) white (d) green
20. 20.🌈 Which colour is #00ffff? (a) yellow (b) blue (c) bright green (d) cyan
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 15px;
      border: 4px solid black;
      margin: 15px;
    }
22. 22.✍️ What value is given to padding in this rule?
    li {
      font-style: italic;
      font-size: 20px;
      padding: 8px;
    } (a) padding (b) bold (c) 8px (d) 2px solid
23. 23.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 5px;
      border: 4px solid black;
      margin: 5px;
    }
24. 24.📱 What does a media query check? (a) the screen width (b) the time of day (c) the page title (d) the battery level
25. 25.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
26. 26.What does color do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
27. 27.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
28. 28.📦 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: 25px;
      border: 3px solid black;
      margin: 5px;
    }
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      padding: 8px;
      color: red;
      text-align: center;
      width: 300px;
    }
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
31. 31.True or false: li is an element selector. (a) False (b) True
32. 32.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
33. 33.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
34. 34.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
35. 35.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
36. 36.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    h1 { color: red; }
    .red { color: purple; } (a) white (b) orange (c) red (d) purple
37. 37.🎯 Which CSS selector matches this element?
    <h2 class="red" id="end">Hello</h2> (a) li (b) .end (c) h2 (d) #hero
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
40. 40.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black

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