CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 267 · 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.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) blue (d) black
2. 2.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
3. 3.🖌️ What colour is behind the letters?
   h2 {
     text-align: right;
     background-color: red;
     color: black;
     font-size: 40px;
   } (a) blue (b) black (c) red
4. 4.🌈 In #f30000 the red part is the hex number f3. What is it as a normal number?
5. 5.True or false: padding is the gap round content. (a) False (b) True
6. 6.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
7. 7.🎯 Which CSS selector matches this element?
   <p class="menu" id="intro">Hello</p> (a) h1 (b) p (c) .note (d) .intro
8. 8.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
9. 9.💪 Which flexbox property lines boxes up across? (a) justify-content (b) align-items (c) display: flex (d) gap
10. 10.🖌️ What colour is behind the letters?
    p {
      color: blue;
      text-align: right;
      background-color: orange;
      font-size: 12px;
    } (a) white (b) orange (c) blue
11. 11.True or false: padding is space outside the border. (a) True (b) False
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
13. 13.🌈 Which hex code is bright green? (a) #ffff00 (b) #0000ff (c) #000000 (d) #00ff00
14. 14.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    p { color: black; }
    p { color: red; } (a) green (b) black (c) red (d) blue
15. 15.🎯 Which CSS selector matches this element?
    <h1 class="box" id="hero">Hello</h1> (a) h1 (b) .star (c) h2 (d) #box
16. 16.✍️ Which property is set to 2px solid in this rule?
    .box {
      border: 2px solid;
      width: 300px;
    } (a) border (b) width (c) 2px solid (d) font-style
17. 17.🧩 Which language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 90px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
19. 19.True or false: margin is the text or picture. (a) False (b) True
20. 20.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
21. 21.🌈 Which colour is #ffff00? (a) cyan (b) white (c) yellow (d) bright green
22. 22.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
23. 23.🌈 Which colour is rgb(255, 255, 255)? (a) black (b) white (c) magenta (d) blue
24. 24.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes headings and lists (c) changes the text size (d) makes a form box
25. 25.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
26. 26.🌈 Which colour of light is strongest in rgb(156, 103, 139)? (a) blue (b) red (c) green
27. 27.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
28. 28.🌈 Which colour of light is strongest in rgb(187, 55, 87)? (a) blue (b) red (c) green
29. 29.🎯 Can many elements share the same class? (a) No (b) Yes
30. 30.✍️ Which property is set to italic in this rule?
    p {
      color: red;
      font-weight: bold;
      font-style: italic;
      text-align: center;
    } (a) color (b) italic (c) font-style (d) font-size
31. 31.🌈 Which colour of light is strongest in rgb(136, 210, 17)? (a) red (b) green (c) blue
32. 32.True or false: HTML checks a quiz answer. (a) False (b) True
33. 33.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
34. 34.✍️ What value is given to color in this rule?
    p {
      background-color: yellow;
      color: red;
    } (a) color (b) red (c) 20px (d) center
35. 35.🔍 Which is the odd one out? (a) checks a quiz answer (b) puts a picture on a page (c) makes a link (d) makes a form box
36. 36.🌈 Which colour of light is strongest in rgb(233, 111, 28)? (a) green (b) blue (c) red
37. 37.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
38. 38.🎯 What kind of selector is body? (a) an id selector (b) a class selector (c) an element selector
39. 39.What does color do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) makes letters bigger
40. 40.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end

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