CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 451 · 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?
   li {
     background-color: orange;
     color: green;
     font-size: 32px;
     text-align: center;
   } (a) green (b) orange (c) blue
2. 2.Which of these does CSS do? (a) gives the page structure (b) makes a form box (c) changes the text size (d) makes headings and lists
3. 3.True or false: the content is the gap to other boxes. (a) True (b) False
4. 4.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 28px;
     }
   }
5. 5.Which of these is padding? (a) space outside the border (b) the gap round content (c) the line round the box (d) the text or picture
6. 6.🖌️ What colour is behind the letters?
   h2 {
     color: red;
     background-color: green;
     text-align: center;
     font-size: 20px;
   } (a) red (b) black (c) green
7. 7.⚖️ What colour is the text of this element?
   <h2 class="menu" id="hero">Hi</h2>
   CSS:
   #hero { color: red; }
   #hero { color: orange; } (a) green (b) red (c) orange (d) yellow
8. 8.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) cyan (c) magenta (d) white
9. 9.Which of these is margin? (a) the line round the box (b) the gap round content (c) space outside the border (d) space inside the border
10. 10.True or false: margin is space outside the border. (a) False (b) True
11. 11.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
12. 12.🌈 In #0000c1 the blue part is the hex number c1. What is it as a normal number?
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
14. 14.📦 In the box model, which part is the line round the box? (a) margin (b) border (c) content (d) padding
15. 15.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }
16. 16.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
17. 17.🎯 Which element does the selector h1 style? (a) <li class="red"> (b) <div id="hero"> (c) <h1 class="red"> (d) <h2>
18. 18.True or false: HTML reacts to a button click. (a) True (b) False
19. 19.True or false: .menu is a class selector. (a) False (b) True
20. 20.🎨 One CSS file can style how many pages? (a) only one image (b) no pages (c) only one word (d) many pages
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
      width: 300px;
      font-weight: bold;
    }
22. 22.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) green (c) white (d) red
23. 23.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
24. 24.✍️ What value is given to text-align in this rule?
    p {
      text-align: center;
      padding: 8px;
    } (a) text-align (b) yellow (c) center (d) 10px
25. 25.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) red (c) cyan (d) yellow
26. 26.True or false: the content is the gap round content. (a) True (b) False
27. 27.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
28. 28.What does font-weight do? (a) makes letters bigger (b) makes the text bold (c) picks the font style (d) sets the letter colour
29. 29.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
30. 30.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
31. 31.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
32. 32.🎯 Which CSS selector matches this element?
    <span class="red" id="intro">Hello</span> (a) #red (b) #main (c) .box (d) #intro
33. 33.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    #end { color: orange; }
    .note { color: green; }
    h2 { color: blue; } (a) blue (b) orange (c) purple (d) green
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 5px;
      border: 2px solid black;
      margin: 0px;
    }
35. 35.🎨 Which tag connects an outside CSS file? (a) <link> (b) <a> (c) <img> (d) <css>
36. 36.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) black (d) green
37. 37.🖌️ What colour are the letters?
    p {
      color: black;
      background-color: purple;
      text-align: left;
      font-size: 32px;
    } (a) purple (b) black (c) white
38. 38.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
39. 39.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    #hero { color: red; }
    #hero { color: green; } (a) purple (b) red (c) green (d) blue
40. 40.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Colourful Site Styles (d) Creative Sheet System

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