CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 53 · 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 is the selector in this CSS rule?
   h2 {
     font-size: 20px;
     background-color: yellow;
     font-style: italic;
   } (a) font-size (b) yellow (c) h1 (d) h2
2. 2.⚖️ What colour is the text of this element?
   <h2 class="box" id="logo">Hi</h2>
   CSS:
   #logo { color: blue; }
   #logo { color: orange; } (a) blue (b) black (c) purple (d) orange
3. 3.⚖️ What colour is the text of this element?
   <h1 class="menu" id="logo">Hi</h1>
   CSS:
   .menu { color: blue; }
   #logo { color: black; } (a) white (b) blue (c) black (d) purple
4. 4.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
5. 5.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-size: 20px;
     font-style: italic;
   }
7. 7.True or false: img is an element selector. (a) True (b) False
8. 8.True or false: HTML reacts to a button click. (a) True (b) False
9. 9.True or false: margin is space outside the border. (a) True (b) False
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
    }
11. 11.True or false: HTML counts down a timer. (a) False (b) True
12. 12.🌈 Which colour of light is strongest in rgb(113, 21, 219)? (a) green (b) blue (c) red
13. 13.💪 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).
14. 14.🎯 Which CSS selector matches this element?
    <li class="note" id="intro">Hello</li> (a) div (b) #intro (c) .big (d) .intro
15. 15.Which of these does HTML do? (a) reacts to a button click (b) sets colours and fonts (c) puts a picture on a page (d) counts down a timer
16. 16.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 28px;
      color: white;
      background-color: black;
      text-align: right;
    } (a) on the left (b) on the right (c) in the middle
17. 17.🎯 Can many elements share the same class? (a) No (b) Yes
18. 18.✍️ Which property is set to red in this rule?
    h1 {
      margin: 10px;
      color: red;
    } (a) red (b) color (c) text-align (d) font-size
19. 19.🖌️ What colour are the letters?
    li {
      font-size: 12px;
      text-align: left;
      color: yellow;
      background-color: white;
    } (a) white (b) yellow (c) orange
20. 20.🖌️ Which CSS property makes letters bigger? (a) background-color (b) color (c) font-size (d) font-family
21. 21.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) border (d) margin
22. 22.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) padding (d) content
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
24. 24.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-size (c) text-align (d) color
25. 25.✍️ What is the selector in this CSS rule?
    li {
      border: 2px solid;
      padding: 8px;
    } (a) body (b) li (c) 8px (d) border
26. 26.True or false: li is an element selector. (a) True (b) False
27. 27.Which of these is the border? (a) the gap round content (b) space outside the border (c) the line round the box (d) the gap to other boxes
28. 28.🎯 What kind of selector is #logo? (a) a class selector (b) an element selector (c) an id selector
29. 29.🌈 Which colour is #ffff00? (a) magenta (b) black (c) yellow (d) red
30. 30.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    #end { color: blue; }
    .big { color: white; } (a) blue (b) green (c) white (d) yellow
31. 31.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
32. 32.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
33. 33.✍️ Which property is set to bold in this rule?
    h2 {
      font-weight: bold;
      text-align: center;
      padding: 8px;
      margin: 10px;
    } (a) font-weight (b) width (c) bold (d) border
34. 34.✍️ What value is given to font-size in this rule?
    #top {
      font-size: 20px;
      border: 2px solid;
    } (a) center (b) font-size (c) yellow (d) 20px
35. 35.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
36. 36.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the hr tag (d) the viewport meta tag
37. 37.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
39. 39.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
40. 40.🎯 Which sign starts an id selector? (a) & (b) @ (c) # (d) .

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