CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 669 · 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 CSS selector matches this element?
   <h1 class="star" id="main">Hello</h1> (a) h1 (b) #star (c) .menu (d) .main
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 210px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 100px wide (no margins).
3. 3.True or false: padding is space inside the border. (a) False (b) True
4. 4.Which of these is the content? (a) the line round the box (b) space outside the border (c) the text or picture (d) space inside the border
5. 5.⚖️ What colour is the text of this element?
   <h2 class="big" id="top">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: red; } (a) orange (b) blue (c) yellow (d) red
6. 6.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
7. 7.Which of these does HTML do? (a) changes the page live (b) shows a pop-up message (c) counts down a timer (d) makes headings and lists
8. 8.🎯 Which sign starts a class selector? (a) . (b) @ (c) & (d) #
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 10px;
     border: 4px solid black;
     margin: 10px;
   }
10. 10.🌈 Which hex code is yellow? (a) #ff0000 (b) #ffffff (c) #00ff00 (d) #ffff00
11. 11.True or false: h1 is a class selector. (a) False (b) True
12. 12.🖌️ Which CSS property picks the font style? (a) text-align (b) color (c) background-color (d) font-family
13. 13.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
14. 14.True or false: the content is the line round the box. (a) True (b) False
15. 15.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      color: blue;
      background-color: black;
      font-size: 28px;
    } (a) red (b) blue (c) black
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 240px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
17. 17.True or false: CSS adds space around boxes. (a) False (b) True
18. 18.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
19. 19.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
20. 20.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 100 (c) 255 (d) 1000
21. 21.True or false: img is a class selector. (a) False (b) True
22. 22.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) white (d) green
23. 23.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    p { color: black; }
    p { color: yellow; } (a) orange (b) yellow (c) black (d) blue
24. 24.🎯 Which CSS selector matches this element?
    <h1 class="note" id="end">Hello</h1> (a) h2 (b) .end (c) #note (d) h1
25. 25.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) red (d) black
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-weight: bold;
      width: 300px;
      font-style: italic;
    }
28. 28.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
29. 29.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
30. 30.What does background-color do? (a) sets the letter colour (b) makes the text bold (c) picks the font style (d) colours behind the text
31. 31.🌈 Which colour is #00ffff? (a) blue (b) white (c) magenta (d) cyan
32. 32.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
33. 33.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    p { color: blue; }
    p { color: black; } (a) blue (b) green (c) white (d) black
34. 34.🖌️ What colour are the letters?
    h1 {
      font-size: 16px;
      color: yellow;
      text-align: left;
      background-color: purple;
    } (a) purple (b) white (c) yellow
35. 35.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 25px;
      border: 3px solid black;
      margin: 15px;
    }
36. 36.🌈 Which colour of light is strongest in rgb(81, 206, 49)? (a) green (b) blue (c) red
37. 37.Which of these does CSS do? (a) shows a pop-up message (b) puts a picture on a page (c) makes a link (d) adds space around boxes
38. 38.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 3 (d) 4
39. 39.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
40. 40.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      border: 2px solid;
      font-size: 20px;
    } (a) .box (b) 2px solid (c) h2 (d) text-align

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