CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 807 · 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?
   <p class="note" id="hero">Hi</p>
   CSS:
   #hero { color: red; }
   #hero { color: orange; } (a) blue (b) red (c) orange (d) yellow
2. 2.✍️ What value is given to border in this rule?
   body {
     border: 2px solid;
     width: 300px;
   } (a) italic (b) 2px solid (c) 300px (d) border
3. 3.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
4. 4.True or false: CSS counts down a timer. (a) False (b) True
5. 5.🖌️ How big is the text, in px?
   p {
     background-color: orange;
     color: yellow;
     text-align: left;
     font-size: 28px;
   }
6. 6.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
7. 7.Which of these does CSS do? (a) reacts to a button click (b) makes headings and lists (c) sets colours and fonts (d) makes a form box
8. 8.True or false: padding is space inside the border. (a) True (b) False
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     margin: 10px;
   }
10. 10.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
      background-color: yellow;
    }
12. 12.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      font-weight: bold;
    } (a) p (b) padding (c) .note (d) bold
13. 13.💪 Which flexbox property turns on flexbox? (a) display: flex (b) justify-content (c) align-items (d) gap
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 10px;
      border: 3px solid black;
      margin: 5px;
    }
15. 15.🎯 Which CSS selector matches this element?
    <div class="big" id="main">Hello</div> (a) .red (b) #main (c) #big (d) #logo
16. 16.✍️ Which property is set to bold in this rule?
    h1 {
      font-weight: bold;
      font-style: italic;
    } (a) border (b) width (c) bold (d) font-weight
17. 17.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
18. 18.Which of these does CSS do? (a) changes the page live (b) makes a link (c) changes the text size (d) shows a pop-up message
19. 19.📦 In the box model, which part is the text or picture? (a) content (b) border (c) padding (d) margin
20. 20.✍️ What value is given to margin in this rule?
    h1 {
      text-align: center;
      width: 300px;
      font-style: italic;
      margin: 10px;
    } (a) 10px (b) bold (c) 8px (d) margin
21. 21.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
22. 22.🌈 In #003d00 the green part is the hex number 3d. What is it as a normal number?
23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }
24. 24.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
25. 25.🎯 Which CSS selector matches this element?
    <h1 class="red" id="top">Hello</h1> (a) #red (b) .red (c) #intro (d) .top
26. 26.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
27. 27.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    h1 { color: blue; }
    .big { color: red; } (a) white (b) blue (c) red (d) purple
28. 28.True or false: margin is the gap round content. (a) False (b) True
29. 29.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    .red { color: red; }
    #intro { color: orange; }
    h2 { color: black; } (a) red (b) orange (c) yellow (d) black
30. 30.True or false: p is an id selector. (a) False (b) True
31. 31.🖌️ What colour is behind the letters?
    h1 {
      color: blue;
      text-align: left;
      background-color: yellow;
      font-size: 20px;
    } (a) blue (b) black (c) yellow
32. 32.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    #logo { color: blue; }
    #logo { color: white; } (a) white (b) red (c) blue (d) yellow
33. 33.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
34. 34.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
35. 35.What does font-size do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) picks the font style
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
37. 37.🖌️ What colour is behind the letters?
    h2 {
      font-size: 28px;
      text-align: right;
      background-color: white;
      color: green;
    } (a) green (b) white (c) purple
38. 38.🖌️ What colour are the letters?
    p {
      color: black;
      text-align: right;
      font-size: 16px;
      background-color: red;
    } (a) yellow (b) black (c) red
39. 39.🔍 Which is the odd one out? (a) changes the page live (b) sets colours and fonts (c) adds space around boxes (d) lays out the page
40. 40.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS

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