CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 498 · 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?
   h1 {
     color: red;
     text-align: center;
   } (a) color (b) center (c) p (d) h1
2. 2.What does background-color do? (a) centres a heading (b) colours behind the text (c) makes the text bold (d) makes letters bigger
3. 3.Which of these is padding? (a) the gap round content (b) the gap to other boxes (c) the line round the box (d) space outside the border
4. 4.🎯 Which CSS selector matches this element?
   <div class="star" id="end">Hello</div> (a) #star (b) #end (c) .end (d) span
5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 290px;
     padding: 10px;
     border: 1px solid black;
     margin: 20px;
   }
6. 6.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
7. 7.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
8. 8.✍️ What is the selector in this CSS rule?
   h1 {
     width: 300px;
     padding: 8px;
   } (a) width (b) p (c) h1 (d) 8px
9. 9.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the br tag (d) the title tag
10. 10.Which of these does JavaScript do? (a) puts a picture on a page (b) changes the text size (c) makes a link (d) checks a quiz answer
11. 11.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
12. 12.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
13. 13.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
14. 14.True or false: #logo is an id selector. (a) True (b) False
15. 15.🖌️ What colour are the letters?
    h2 {
      background-color: black;
      font-size: 32px;
      color: red;
      text-align: right;
    } (a) green (b) red (c) black
16. 16.🌈 Which colour is rgb(0, 0, 0)? (a) magenta (b) yellow (c) red (d) black
17. 17.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    .red { color: blue; }
    h2 { color: black; } (a) white (b) blue (c) green (d) black
18. 18.What does font-size do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) picks the font style
19. 19.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) align-items (d) flex-direction
20. 20.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      font-size: 28px;
      background-color: blue;
      color: white;
    } (a) white (b) yellow (c) blue
21. 21.🌈 Which colour is rgb(255, 0, 255)? (a) white (b) yellow (c) magenta (d) cyan
22. 22.🌈 Which colour is rgb(0, 0, 255)? (a) white (b) red (c) blue (d) bright green
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 4px solid black;
      margin: 10px;
    }
24. 24.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
25. 25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
26. 26.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
27. 27.🌈 Which hex code is magenta? (a) #ffff00 (b) #000000 (c) #ff00ff (d) #0000ff
28. 28.🖌️ What colour are the letters?
    p {
      color: orange;
      font-size: 32px;
      text-align: center;
      background-color: white;
    } (a) purple (b) orange (c) white
29. 29.🌈 Which colour of light is strongest in rgb(64, 156, 136)? (a) blue (b) green (c) red
30. 30.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) . (d) ,
31. 31.🎯 Which sign starts an id selector? (a) . (b) # (c) & (d) @
32. 32.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    #main { color: purple; }
    .red { color: white; }
    h2 { color: red; } (a) purple (b) red (c) blue (d) white
33. 33.🖌️ How big is the text, in px?
    li {
      font-size: 28px;
      text-align: right;
      color: yellow;
      background-color: purple;
    }
34. 34.🌈 Which hex code is red? (a) #ffffff (b) #ff0000 (c) #00ffff (d) #00ff00
35. 35.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: purple; }
    .box { color: yellow; } (a) red (b) yellow (c) purple (d) blue
36. 36.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) [ ] (d) < >
37. 37.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
38. 38.🖌️ How big is the text, in px?
    p {
      background-color: blue;
      text-align: right;
      font-size: 12px;
      color: purple;
    }
39. 39.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) border (d) content
40. 40.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    }

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