CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 37 · 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 attribute adds CSS inside one tag? (a) src (b) href (c) alt (d) style
2. 2.Which of these does CSS do? (a) sets colours and fonts (b) shows a pop-up message (c) changes the page live (d) counts down a timer
3. 3.🌈 Which colour of light is strongest in rgb(135, 155, 14)? (a) blue (b) red (c) green
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 50px;
     padding: 25px;
     border: 3px solid black;
     margin: 5px;
   }
5. 5.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 8px;
     }
   } (a) No (b) Yes
6. 6.🖌️ What colour is behind the letters?
   li {
     text-align: left;
     background-color: orange;
     color: yellow;
     font-size: 40px;
   } (a) orange (b) white (c) yellow
7. 7.📦 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: 5px solid black;
     margin: 20px;
   }
8. 8.✍️ What is the selector in this CSS rule?
   p {
     font-style: italic;
     font-weight: bold;
   } (a) bold (b) font-style (c) p (d) .note
9. 9.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      padding: 8px;
      text-align: center;
      color: red;
      background-color: yellow;
    }
11. 11.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
12. 12.🌈 Which colour is #00ff00? (a) bright green (b) magenta (c) blue (d) cyan
13. 13.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }
14. 14.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
15. 15.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    .note { color: yellow; }
    h2 { color: orange; }
    #hero { color: black; } (a) blue (b) orange (c) yellow (d) black
16. 16.🎯 Which CSS selector matches this element?
    <p class="big" id="end">Hello</p> (a) #hero (b) #big (c) p (d) .red
17. 17.🎯 Can many elements share the same class? (a) Yes (b) No
18. 18.📦 In the box model, which part is space inside the border? (a) content (b) border (c) margin (d) padding
19. 19.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
20. 20.Which of these is margin? (a) the gap round content (b) space inside the border (c) space outside the border (d) the line round the box
21. 21.🖌️ What colour is behind the letters?
    p {
      font-size: 20px;
      text-align: right;
      color: orange;
      background-color: yellow;
    } (a) yellow (b) orange (c) black
22. 22.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) exactly 1000px (d) turned off
23. 23.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
24. 24.🖌️ What colour are the letters?
    p {
      color: blue;
      font-size: 36px;
      text-align: left;
      background-color: yellow;
    } (a) orange (b) yellow (c) blue
25. 25.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      text-align: center;
      font-style: italic;
      color: red;
      padding: 8px;
    }
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
    }
28. 28.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
30. 30.Which of these does JavaScript do? (a) makes a link (b) makes a form box (c) counts down a timer (d) rounds box corners
31. 31.✍️ Which property is set to 8px in this rule?
    .box {
      padding: 8px;
      color: red;
      font-weight: bold;
    } (a) font-weight (b) border (c) 8px (d) padding
32. 32.🌈 Which colour is #0000ff? (a) white (b) cyan (c) magenta (d) blue
33. 33.Which of these is padding? (a) the gap to other boxes (b) space inside the border (c) the text or picture (d) a solid or dotted edge
34. 34.🖌️ What colour are the letters?
    h1 {
      font-size: 12px;
      background-color: yellow;
      text-align: right;
      color: orange;
    } (a) yellow (b) orange (c) red
35. 35.🌈 Which hex code is cyan? (a) #00ff00 (b) #ffffff (c) #000000 (d) #00ffff
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
37. 37.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
38. 38.✍️ What is the selector in this CSS rule?
    .box {
      width: 300px;
      background-color: yellow;
    } (a) width (b) yellow (c) h2 (d) .box
39. 39.🎯 Which element does the selector h2 style? (a) <h2 class="star"> (b) <span id="top"> (c) <div class="star"> (d) <li>
40. 40.🖌️ How big is the text, in px?
    p {
      background-color: orange;
      text-align: right;
      font-size: 12px;
      color: yellow;
    }

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