CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 674 · 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.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 18px;
     }
   }
2. 2.⚖️ What colour is the text of this element?
   <h1 class="big" id="top">Hi</h1>
   CSS:
   #top { color: yellow; }
   h1 { color: black; } (a) yellow (b) orange (c) purple (d) black
3. 3.📦 In the box model, which part is the line round the box? (a) margin (b) border (c) padding (d) content
4. 4.🖌️ What colour is behind the letters?
   h2 {
     background-color: yellow;
     color: red;
     font-size: 28px;
     text-align: center;
   } (a) red (b) yellow (c) blue
5. 5.🧩 Which language adds space around boxes? (a) JavaScript (b) CSS (c) HTML
6. 6.🎯 Which element does the selector p style? (a) <h1> (b) <li id="top"> (c) <p class="red"> (d) <h2 class="red">
7. 7.🌈 Which colour is rgb(255, 255, 0)? (a) cyan (b) yellow (c) white (d) red
8. 8.🖌️ Where does the text sit on its line?
   h1 {
     font-size: 32px;
     text-align: left;
     background-color: yellow;
     color: white;
   } (a) in the middle (b) on the left (c) on the right
9. 9.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
10. 10.📦 In the box model, which part is the text or picture? (a) border (b) padding (c) margin (d) content
11. 11.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
12. 12.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
13. 13.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
14. 14.What does text-align do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) centres a heading
15. 15.🧩 Which language changes the text size? (a) JavaScript (b) CSS (c) HTML
16. 16.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
17. 17.✍️ What is the selector in this CSS rule?
    #top {
      text-align: center;
      font-size: 20px;
      margin: 10px;
      font-style: italic;
    } (a) text-align (b) li (c) #top (d) 20px
18. 18.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) #top (b) .menu (c) .hero (d) .note
19. 19.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
20. 20.🌈 In #840000 the red part is the hex number 84. What is it as a normal number?
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
23. 23.🌈 Which hex code is cyan? (a) #ff0000 (b) #00ffff (c) #ff00ff (d) #ffff00
24. 24.🖌️ What colour is behind the letters?
    h2 {
      color: orange;
      background-color: purple;
      text-align: center;
      font-size: 24px;
    } (a) purple (b) orange (c) red
25. 25.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) center (d) space-between
26. 26.🌈 Which hex code is red? (a) #00ffff (b) #ff0000 (c) #ffffff (d) #00ff00
27. 27.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) border (d) margin
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    .box { color: black; }
    p { color: red; } (a) white (b) red (c) black (d) orange
29. 29.🎯 Which sign starts an id selector? (a) @ (b) # (c) . (d) &
30. 30.✍️ In color: blue; which part is the value? (a) : (b) ; (c) color (d) blue
31. 31.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
32. 32.🖌️ Where does the text sit on its line?
    p {
      background-color: red;
      font-size: 36px;
      color: green;
      text-align: center;
    } (a) on the left (b) in the middle (c) on the right
33. 33.🧩 Which language puts a picture on a page? (a) JavaScript (b) CSS (c) HTML
34. 34.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) 800px or narrower (d) turned off
35. 35.True or false: body is an element selector. (a) False (b) True
36. 36.✍️ What is the selector in this CSS rule?
    #top {
      text-align: center;
      margin: 10px;
      font-style: italic;
      border: 2px solid;
    } (a) #top (b) text-align (c) li (d) 10px
37. 37.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    p { color: purple; }
    .menu { color: yellow; } (a) orange (b) yellow (c) white (d) purple
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
39. 39.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: yellow; }
    #main { color: white; } (a) blue (b) white (c) green (d) yellow
40. 40.Which of these is padding? (a) the gap to other boxes (b) the gap round content (c) the line round the box (d) a solid or dotted edge

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