CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 21 · 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 justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 110px;
     padding: 25px;
     border: 3px solid black;
     margin: 0px;
   }
3. 3.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
4. 4.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
5. 5.✍️ What value is given to padding in this rule?
   li {
     text-align: center;
     font-style: italic;
     padding: 8px;
   } (a) padding (b) 2px solid (c) bold (d) 8px
6. 6.True or false: HTML makes headings and lists. (a) True (b) False
7. 7.Which of these does CSS do? (a) makes a link (b) adds space around boxes (c) counts down a timer (d) changes the page live
8. 8.True or false: the content is the text or picture. (a) True (b) False
9. 9.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
10. 10.Which of these does JavaScript do? (a) gives the page structure (b) changes the text size (c) changes the page live (d) makes headings and lists
11. 11.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 30px;
      border: 3px solid black;
      margin: 20px;
    }
12. 12.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) blue (d) green
13. 13.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: orange; }
    #hero { color: yellow; } (a) blue (b) yellow (c) white (d) orange
14. 14.🖌️ How big is the text, in px?
    p {
      font-size: 40px;
      background-color: purple;
      color: black;
      text-align: center;
    }
15. 15.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
16. 16.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
17. 17.✍️ Which property is set to 2px solid in this rule?
    p {
      border: 2px solid;
      margin: 10px;
      font-style: italic;
    } (a) width (b) 2px solid (c) font-style (d) border
18. 18.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
19. 19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
21. 21.True or false: .menu is an element selector. (a) False (b) True
22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 90px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
24. 24.🎯 What kind of selector is li? (a) an id selector (b) an element selector (c) a class selector
25. 25.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
26. 26.True or false: CSS makes a form box. (a) False (b) True
27. 27.🎯 Which CSS selector matches this element?
    <li class="red" id="logo">Hello</li> (a) #logo (b) #red (c) #end (d) div
28. 28.🎯 Which CSS selector matches this element?
    <h1 class="note" id="top">Hello</h1> (a) #note (b) #top (c) h2 (d) #intro
29. 29.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
30. 30.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    #intro { color: white; }
    h2 { color: green; } (a) green (b) black (c) white (d) yellow
31. 31.📦 In the box model, which part is space inside the border? (a) margin (b) content (c) padding (d) border
32. 32.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
33. 33.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: green; } (a) purple (b) green (c) yellow (d) white
34. 34.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <css> (d) <img>
35. 35.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) : (d) -
36. 36.🎯 Which CSS selector matches this element?
    <p class="note" id="logo">Hello</p> (a) .note (b) #note (c) h1 (d) .logo
37. 37.True or false: padding is space inside the border. (a) True (b) False
38. 38.🎯 What kind of selector is #end? (a) an element selector (b) an id selector (c) a class selector
39. 39.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
40. 40.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js

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