CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 461 · 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 the text of this element?
   <h1 class="menu" id="hero">Hi</h1>
   CSS:
   h1 { color: black; }
   .menu { color: blue; }
   #hero { color: yellow; } (a) white (b) blue (c) yellow (d) black
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 280px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
3. 3.🌈 Which colour of light is strongest in rgb(22, 121, 252)? (a) green (b) blue (c) red
4. 4.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) space inside the border (d) a solid or dotted edge
5. 5.✍️ What is the selector in this CSS rule?
   #top {
     color: red;
     text-align: center;
     background-color: yellow;
   } (a) center (b) color (c) li (d) #top
6. 6.🌈 Which colour is #ff0000? (a) white (b) cyan (c) bright green (d) red
7. 7.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 3 (d) 2
8. 8.🖌️ How big is the text, in px?
   h1 {
     font-size: 20px;
     background-color: yellow;
     text-align: left;
     color: purple;
   }
9. 9.⚖️ What colour is the text of this element?
   <h2 class="red" id="logo">Hi</h2>
   CSS:
   h2 { color: orange; }
   .red { color: green; } (a) red (b) white (c) green (d) orange
10. 10.✍️ Which property is set to 20px in this rule?
    .box {
      font-size: 20px;
      margin: 10px;
    } (a) 20px (b) background-color (c) font-size (d) text-align
11. 11.🌈 Which colour is rgb(0, 0, 255)? (a) yellow (b) black (c) blue (d) red
12. 12.True or false: JavaScript counts down a timer. (a) True (b) False
13. 13.✍️ What is the selector in this CSS rule?
    #top {
      color: red;
      background-color: yellow;
    } (a) #top (b) li (c) color (d) yellow
14. 14.True or false: margin is the gap round content. (a) True (b) False
15. 15.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
16. 16.✍️ What is the selector in this CSS rule?
    #top {
      border: 2px solid;
      color: red;
      font-size: 20px;
      font-style: italic;
    } (a) red (b) border (c) #top (d) li
17. 17.True or false: JavaScript checks a quiz answer. (a) True (b) False
18. 18.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
    }
20. 20.🌈 Which colour is #ffff00? (a) white (b) blue (c) yellow (d) bright green
21. 21.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
22. 22.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: orange; } (a) orange (b) red (c) black (d) green
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
24. 24.Which of these is the content? (a) space inside the border (b) the gap round content (c) the text or picture (d) the gap to other boxes
25. 25.True or false: JavaScript reacts to a button click. (a) True (b) False
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      border: 2px solid;
      padding: 8px;
    }
27. 27.Which of these is the border? (a) the gap round content (b) the line round the box (c) space outside the border (d) the text or picture
28. 28.🎨 Which tag holds CSS inside the head? (a) <style> (b) <body> (c) <css> (d) <script>
29. 29.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
30. 30.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
31. 31.🖌️ How big is the text, in px?
    h1 {
      text-align: right;
      font-size: 20px;
      color: yellow;
      background-color: blue;
    }
32. 32.True or false: CSS makes headings and lists. (a) True (b) False
33. 33.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    }
34. 34.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or narrower (d) 800px or wider
35. 35.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
36. 36.Which of these does CSS do? (a) gives the page structure (b) reacts to a button click (c) changes the page live (d) rounds box corners
37. 37.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 255 (c) 100 (d) 99
38. 38.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    #logo { color: blue; }
    p { color: black; } (a) green (b) red (c) black (d) blue
39. 39.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-size: 20px;
      border: 2px solid;
    }

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