CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 163 · 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 colour is the text of this element?
   <h2 class="big" id="hero">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: orange; } (a) green (b) white (c) yellow (d) orange
2. 2.Which of these is the content? (a) the text or picture (b) the line round the box (c) the gap round content (d) space outside the border
3. 3.💪 Which flexbox property sets space between boxes? (a) display: flex (b) justify-content (c) gap (d) flex-direction
4. 4.🌈 In #680000 the red part is the hex number 68. What is it as a normal number?
5. 5.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
6. 6.True or false: padding is the gap round content. (a) True (b) False
7. 7.🖌️ How big is the text, in px?
   h1 {
     text-align: left;
     color: black;
     background-color: red;
     font-size: 20px;
   }
8. 8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the shorter one (d) the later one
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 60px wide (no margins).
10. 10.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the br tag (d) the title tag
11. 11.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
12. 12.🧩 Which language makes a form box? (a) HTML (b) JavaScript (c) CSS
13. 13.🎯 Which element does the selector div style? (a) <p class="red"> (b) <span> (c) <h1 id="hero"> (d) <div class="red">
14. 14.🌈 In #00fd00 the green part is the hex number fd. What is it as a normal number?
15. 15.🖌️ How big is the text, in px?
    h1 {
      font-size: 24px;
      background-color: black;
      text-align: left;
      color: blue;
    }
16. 16.🎯 Which CSS selector matches this element?
    <h1 class="red" id="hero">Hello</h1> (a) h1 (b) h2 (c) #top (d) #red
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      background-color: yellow;
      text-align: center;
    }
18. 18.🎯 Which element does the selector #hero style? (a) <h2 class="menu"> (b) <h1 id="top"> (c) <h1 class="hero"> (d) <h1 id="hero">
19. 19.✍️ What value is given to font-size in this rule?
    body {
      padding: 8px;
      font-weight: bold;
      margin: 10px;
      font-size: 20px;
    } (a) yellow (b) font-size (c) 20px (d) center
20. 20.🖌️ What colour are the letters?
    h1 {
      color: black;
      text-align: left;
      background-color: white;
      font-size: 20px;
    } (a) white (b) black (c) red
21. 21.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: purple; } (a) blue (b) green (c) black (d) purple
22. 22.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
23. 23.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
24. 24.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
25. 25.🌈 Which hex code is magenta? (a) #ff00ff (b) #ffff00 (c) #ffffff (d) #00ffff
26. 26.🎯 Which CSS selector matches this element?
    <h2 class="box" id="end">Hello</h2> (a) li (b) #hero (c) .box (d) #box
27. 27.🖌️ What colour is behind the letters?
    p {
      background-color: black;
      font-size: 28px;
      text-align: left;
      color: orange;
    } (a) yellow (b) orange (c) black
28. 28.🖌️ What colour are the letters?
    li {
      color: green;
      text-align: center;
      background-color: white;
      font-size: 20px;
    } (a) green (b) white (c) orange
29. 29.🌈 Which colour of light is strongest in rgb(186, 78, 117)? (a) green (b) red (c) blue
30. 30.🎯 Which element does the selector li style? (a) <li class="box"> (b) <p id="intro"> (c) <span class="box"> (d) <div>
31. 31.🖌️ What colour is behind the letters?
    p {
      color: white;
      background-color: blue;
      font-size: 12px;
      text-align: center;
    } (a) purple (b) blue (c) white
32. 32.🌈 In #000800 the green part is the hex number 08. What is it as a normal number?
33. 33.🧩 Which language reacts to a button click? (a) HTML (b) JavaScript (c) CSS
34. 34.True or false: the border is the gap to other boxes. (a) True (b) False
35. 35.🌈 Which colour is #0000ff? (a) bright green (b) red (c) yellow (d) blue
36. 36.True or false: CSS shows a pop-up message. (a) True (b) False
37. 37.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) margin (d) border
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      font-size: 20px;
    }
39. 39.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) flex-start (d) space-between
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).

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