CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 80 · 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 are the letters?
   h2 {
     font-size: 28px;
     text-align: center;
     color: black;
     background-color: red;
   } (a) red (b) orange (c) black
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 220px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 100px wide (no margins).
3. 3.True or false: CSS changes the text size. (a) False (b) True
4. 4.🎯 Which CSS selector matches this element?
   <div class="star" id="main">Hello</div> (a) span (b) #main (c) .menu (d) #logo
5. 5.What does font-family do? (a) colours behind the text (b) picks the font style (c) makes the text bold (d) centres a heading
6. 6.True or false: HTML lays out the page. (a) False (b) True
7. 7.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 14px;
     }
   }
8. 8.🖌️ Where does the text sit on its line?
   h2 {
     text-align: left;
     color: white;
     font-size: 28px;
     background-color: purple;
   } (a) on the right (b) in the middle (c) on the left
9. 9.⚖️ What colour is the text of this element?
   <p class="box" id="main">Hi</p>
   CSS:
   .box { color: yellow; }
   .box { color: blue; } (a) yellow (b) white (c) blue (d) green
10. 10.What does color do? (a) picks the font style (b) centres a heading (c) sets the letter colour (d) makes the text bold
11. 11.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
12. 12.🎯 What kind of selector is #logo? (a) a class selector (b) an id selector (c) an element selector
13. 13.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
14. 14.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
15. 15.What does background-color do? (a) makes letters bigger (b) picks the font style (c) colours behind the text (d) makes the text bold
16. 16.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) 600px or narrower (d) exactly 1000px
17. 17.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    #hero { color: red; } (a) white (b) red (c) black (d) blue
18. 18.🔍 Which is the odd one out? (a) gives the page structure (b) counts down a timer (c) makes headings and lists (d) makes a form box
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
20. 20.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
21. 21.✍️ What value is given to padding in this rule?
    p {
      font-weight: bold;
      font-style: italic;
      padding: 8px;
    } (a) bold (b) padding (c) 2px solid (d) 8px
22. 22.🖌️ What colour are the letters?
    h1 {
      background-color: purple;
      font-size: 12px;
      color: red;
      text-align: center;
    } (a) blue (b) purple (c) red
23. 23.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }
24. 24.🖌️ Which CSS property centres a heading? (a) color (b) background-color (c) font-size (d) text-align
25. 25.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <style> (d) <body>
26. 26.✍️ What is the selector in this CSS rule?
    h2 {
      background-color: yellow;
      padding: 8px;
      margin: 10px;
    } (a) 8px (b) background-color (c) h2 (d) h1
27. 27.Which of these is padding? (a) space outside the border (b) the text or picture (c) the line round the box (d) the gap round content
28. 28.✍️ What value is given to margin in this rule?
    h1 {
      margin: 10px;
      font-weight: bold;
      text-align: center;
    } (a) margin (b) bold (c) 8px (d) 10px
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 20px;
      border: 4px solid black;
      margin: 10px;
    }
31. 31.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
32. 32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 15px;
      border: 2px solid black;
      margin: 5px;
    }
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
    }
34. 34.What does justify-content: flex-start 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
35. 35.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
36. 36.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
37. 37.✍️ Which property is set to 2px solid in this rule?
    h2 {
      background-color: yellow;
      border: 2px solid;
      margin: 10px;
      font-weight: bold;
    } (a) 2px solid (b) width (c) font-style (d) border
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
39. 39.🌈 Which colour of light is strongest in rgb(24, 4, 244)? (a) red (b) green (c) blue
40. 40.True or false: CSS counts down a timer. (a) True (b) False

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