CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 782 · 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 property sets the letter colour? (a) text-align (b) font-weight (c) color (d) background-color
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     color: red;
   }
3. 3.🌈 Which colour of light is strongest in rgb(38, 189, 26)? (a) green (b) blue (c) red
4. 4.🎯 Which element does the selector span style? (a) <p> (b) <span class="red"> (c) <h2 id="top"> (d) <h1 class="red">
5. 5.🌈 Which colour of light is strongest in rgb(235, 35, 87)? (a) red (b) blue (c) green
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 50px wide (no margins).
7. 7.🔍 Which is the odd one out? (a) lays out the page (b) adds space around boxes (c) makes a form box (d) changes the text size
8. 8.What does font-size do? (a) sets the letter colour (b) makes letters bigger (c) colours behind the text (d) centres a heading
9. 9.🎯 Which element does the selector h2 style? (a) <span id="main"> (b) <div class="note"> (c) <li> (d) <h2 class="note">
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
11. 11.🖌️ Which CSS property makes letters bigger? (a) font-family (b) font-weight (c) font-size (d) text-align
12. 12.🖌️ How big is the text, in px?
    p {
      background-color: black;
      color: red;
      font-size: 16px;
      text-align: right;
    }
13. 13.True or false: #logo is a class selector. (a) False (b) True
14. 14.🖌️ What colour are the letters?
    h2 {
      background-color: white;
      text-align: right;
      font-size: 32px;
      color: green;
    } (a) white (b) green (c) red
15. 15.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-start (d) flex-end
16. 16.✍️ What value is given to padding in this rule?
    p {
      padding: 8px;
      font-size: 20px;
    } (a) padding (b) 8px (c) 2px solid (d) bold
17. 17.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
18. 18.⚖️ 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
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
20. 20.True or false: JavaScript changes the page live. (a) False (b) True
21. 21.✍️ In color: blue; which part is the property? (a) color (b) : (c) ; (d) blue
22. 22.True or false: HTML counts down a timer. (a) True (b) False
23. 23.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
24. 24.Which of these does JavaScript do? (a) rounds box corners (b) counts down a timer (c) makes a link (d) lays out the page
25. 25.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    h1 { color: yellow; }
    .star { color: purple; } (a) yellow (b) black (c) orange (d) purple
26. 26.Which of these does JavaScript do? (a) changes the page live (b) gives the page structure (c) adds space around boxes (d) makes a form box
27. 27.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) black (c) blue (d) white
28. 28.✍️ Which property is set to center in this rule?
    p {
      margin: 10px;
      text-align: center;
      font-style: italic;
      width: 300px;
    } (a) margin (b) background-color (c) center (d) text-align
29. 29.🌈 In #0000da the blue part is the hex number da. What is it as a normal number?
30. 30.True or false: CSS sets colours and fonts. (a) True (b) False
31. 31.🎯 Which CSS selector matches this element?
    <p class="red" id="end">Hello</p> (a) .red (b) .box (c) .end (d) #red
32. 32.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
33. 33.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or narrower (c) exactly 1000px (d) 600px or wider
34. 34.🎯 Which sign starts a class selector? (a) # (b) @ (c) . (d) &
35. 35.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
36. 36.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) bright green (c) red (d) magenta
37. 37.✍️ Which property is set to 10px in this rule?
    body {
      background-color: yellow;
      margin: 10px;
      text-align: center;
      font-style: italic;
    } (a) font-weight (b) padding (c) 10px (d) margin
38. 38.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 4 (d) 6
39. 39.True or false: HTML makes a form box. (a) True (b) False
40. 40.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    #end { color: black; }
    .note { color: yellow; }
    p { color: red; } (a) white (b) yellow (c) black (d) red

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