CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 475 · 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 hex code is yellow? (a) #00ff00 (b) #000000 (c) #ff0000 (d) #ffff00
2. 2.True or false: img is an id selector. (a) False (b) True
3. 3.🔍 Which is the odd one out? (a) adds space around boxes (b) puts a picture on a page (c) makes headings and lists (d) makes a form box
4. 4.🌈 Which colour of light is strongest in rgb(61, 210, 78)? (a) blue (b) green (c) red
5. 5.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 250px;
     justify-content: center;
   }
   Inside are 3 boxes, each 50px wide (no margins).
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 150px;
     padding: 15px;
     border: 5px solid black;
     margin: 0px;
   }
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     color: red;
     padding: 8px;
   }
9. 9.Which of these is padding? (a) the gap round content (b) space outside the border (c) the gap to other boxes (d) a solid or dotted edge
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      background-color: yellow;
      border: 2px solid;
    }
11. 11.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 130px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
12. 12.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
13. 13.🌈 In #0000a8 the blue part is the hex number a8. What is it as a normal number?
14. 14.✍️ Which property is set to center in this rule?
    li {
      width: 300px;
      font-size: 20px;
      text-align: center;
      font-style: italic;
    } (a) margin (b) text-align (c) center (d) background-color
15. 15.✍️ What is the selector in this CSS rule?
    p {
      border: 2px solid;
      width: 300px;
      margin: 10px;
    } (a) .note (b) border (c) p (d) 300px
16. 16.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) #intro (b) .red (c) .intro (d) #big
17. 17.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    #main { color: red; }
    #main { color: blue; } (a) red (b) black (c) white (d) blue
18. 18.🧩 Which language reacts to a button click? (a) HTML (b) JavaScript (c) CSS
19. 19.What does background-color do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) colours behind the text
20. 20.🌈 Which colour of light is strongest in rgb(226, 84, 25)? (a) red (b) green (c) blue
21. 21.💪 Which flexbox property turns on flexbox? (a) display: flex (b) align-items (c) gap (d) flex-direction
22. 22.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 3 (d) 6
23. 23.True or false: the content is space inside the border. (a) True (b) False
24. 24.🎯 Which CSS selector matches this element?
    <p class="menu" id="main">Hello</p> (a) .menu (b) .main (c) #menu (d) #logo
25. 25.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: white; } (a) red (b) yellow (c) white (d) black
26. 26.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      font-style: italic;
      width: 300px;
      border: 2px solid;
    }
28. 28.🖌️ What colour are the letters?
    h1 {
      font-size: 36px;
      color: orange;
      background-color: green;
      text-align: right;
    } (a) green (b) black (c) orange
29. 29.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 15px;
      border: 4px solid black;
      margin: 20px;
    }
31. 31.📦 In the box model, which part is the gap to other boxes? (a) padding (b) margin (c) border (d) content
32. 32.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
33. 33.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) alt (d) style
34. 34.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    #intro { color: purple; }
    #intro { color: white; } (a) yellow (b) black (c) white (d) purple
35. 35.True or false: the border is the line round the box. (a) False (b) True
36. 36.🖌️ Where does the text sit on its line?
    p {
      background-color: yellow;
      font-size: 40px;
      color: white;
      text-align: left;
    } (a) on the left (b) in the middle (c) on the right
37. 37.Which of these is the content? (a) the line round the box (b) the gap round content (c) space outside the border (d) the text or picture
38. 38.✍️ Which property is set to yellow in this rule?
    h1 {
      color: red;
      background-color: yellow;
    } (a) yellow (b) padding (c) background-color (d) margin
39. 39.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
40. 40.🧩 Which language makes a link? (a) HTML (b) JavaScript (c) CSS

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