CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 755 · 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.True or false: the border is space outside the border. (a) False (b) True
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 110px;
     padding: 30px;
     border: 5px solid black;
     margin: 20px;
   }
3. 3.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
4. 4.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
5. 5.✍️ What is the selector in this CSS rule?
   .note {
     font-size: 20px;
     font-style: italic;
     border: 2px solid;
   } (a) italic (b) #top (c) font-size (d) .note
6. 6.True or false: p is an id selector. (a) True (b) False
7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 8px;
     }
   }
8. 8.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
9. 9.🎯 Which sign starts an id selector? (a) # (b) @ (c) & (d) .
10. 10.🎯 Which CSS selector matches this element?
    <h2 class="box" id="main">Hello</h2> (a) #main (b) .star (c) #box (d) #logo
11. 11.🧩 Which language makes a link? (a) HTML (b) CSS (c) JavaScript
12. 12.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
13. 13.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
14. 14.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
15. 15.✍️ What is the selector in this CSS rule?
    p {
      border: 2px solid;
      margin: 10px;
      font-style: italic;
      color: red;
    } (a) .note (b) 10px (c) p (d) border
16. 16.✍️ Which property is set to 10px in this rule?
    h2 {
      border: 2px solid;
      width: 300px;
      margin: 10px;
      text-align: center;
    } (a) 10px (b) padding (c) font-weight (d) margin
17. 17.What does font-family do? (a) centres a heading (b) makes letters bigger (c) colours behind the text (d) picks the font style
18. 18.✍️ What is the selector in this CSS rule?
    .note {
      font-weight: bold;
      border: 2px solid;
    } (a) font-weight (b) #top (c) 2px solid (d) .note
19. 19.✍️ What is the selector in this CSS rule?
    body {
      background-color: yellow;
      font-size: 20px;
      text-align: center;
      margin: 10px;
    } (a) .box (b) body (c) 20px (d) background-color
20. 20.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 5px;
      border: 2px solid black;
      margin: 10px;
    }
22. 22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 30px;
      border: 2px solid black;
      margin: 10px;
    }
23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 15px;
      border: 4px solid black;
      margin: 0px;
    }
25. 25.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) the line round the box (d) space outside the border
26. 26.True or false: the border is the line round the box. (a) False (b) True
27. 27.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
28. 28.🎯 Which element does the selector #intro style? (a) <div class="star"> (b) <li id="intro"> (c) <li id="main"> (d) <li class="intro">
29. 29.Which of these does HTML do? (a) changes the text size (b) sets colours and fonts (c) checks a quiz answer (d) makes a form box
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 5px;
      border: 3px solid black;
      margin: 0px;
    }
31. 31.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) black (c) red (d) yellow
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 430px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
33. 33.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
34. 34.🌈 In #6f0000 the red part is the hex number 6f. What is it as a normal number?
35. 35.Which of these is the content? (a) space inside the border (b) the text or picture (c) the line round the box (d) a solid or dotted edge
36. 36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
37. 37.True or false: padding is the gap round content. (a) True (b) False
38. 38.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
39. 39.🎯 Which element does the selector span style? (a) <h1 class="star"> (b) <h2 id="logo"> (c) <span class="star"> (d) <p>
40. 40.🎯 What kind of selector is .note? (a) an id selector (b) an element selector (c) a class selector

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