CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 310 · 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.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 2 (d) 1
2. 2.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) cyan (c) yellow (d) bright green
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     background-color: yellow;
     font-size: 20px;
     color: orange;
     text-align: center;
   } (a) in the middle (b) on the left (c) on the right
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 130px;
     padding: 15px;
     border: 2px solid black;
     margin: 5px;
   }
5. 5.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 240px;
     justify-content: center;
   }
   Inside are 3 boxes, each 60px wide (no margins).
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 70px;
     padding: 20px;
     border: 3px solid black;
     margin: 0px;
   }
8. 8.🎯 Which CSS selector matches this element?
   <span class="big" id="main">Hello</span> (a) #main (b) #big (c) p (d) .main
9. 9.🌈 Which colour of light is strongest in rgb(124, 208, 38)? (a) green (b) blue (c) red
10. 10.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) red (c) blue (d) bright green
11. 11.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
12. 12.Which of these is padding? (a) space outside the border (b) the line round the box (c) the gap to other boxes (d) the gap round content
13. 13.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: yellow; }
    #end { color: orange; }
    .note { color: blue; } (a) orange (b) blue (c) yellow (d) red
14. 14.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
16. 16.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 3 (c) 6 (d) 4
17. 17.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) red (c) yellow (d) magenta
18. 18.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
19. 19.🎯 Which CSS selector matches this element?
    <h1 class="red" id="hero">Hello</h1> (a) #top (b) .hero (c) h2 (d) .red
20. 20.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 10px;
      border: 2px solid black;
      margin: 0px;
    }
22. 22.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <css> (d) <body>
23. 23.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
24. 24.🖌️ What colour is behind the letters?
    h1 {
      background-color: red;
      font-size: 16px;
      text-align: right;
      color: green;
    } (a) red (b) purple (c) green
25. 25.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
      background-color: yellow;
      font-style: italic;
      font-weight: bold;
    }
27. 27.🎯 What kind of selector is #top? (a) a class selector (b) an id selector (c) an element selector
28. 28.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    p { color: purple; }
    p { color: red; } (a) white (b) purple (c) green (d) red
29. 29.What does font-size do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
30. 30.True or false: CSS gives the page structure. (a) False (b) True
31. 31.🎯 Which CSS selector matches this element?
    <h1 class="big" id="top">Hello</h1> (a) #big (b) .big (c) #intro (d) .red
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
    }
33. 33.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) font-size (c) font-family (d) color
34. 34.True or false: HTML makes a link. (a) True (b) False
35. 35.🎯 Which element does the selector .big style? (a) <li id="big"> (b) <li class="big"> (c) <li class="red"> (d) <div class="box">
36. 36.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    #top { color: red; } (a) green (b) red (c) yellow (d) blue
37. 37.Which of these does HTML do? (a) gives the page structure (b) changes the page live (c) sets colours and fonts (d) counts down a timer
38. 38.🎯 Which element does the selector li style? (a) <div> (b) <span class="big"> (c) <p id="intro"> (d) <li class="big">
39. 39.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
40. 40.🌈 Which colour is #0000ff? (a) cyan (b) bright green (c) blue (d) black

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