CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 429 · 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 justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-end (d) flex-start
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
3. 3.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .css (d) .png
4. 4.✍️ What value is given to border in this rule?
   .box {
     width: 300px;
     border: 2px solid;
     font-size: 20px;
     text-align: center;
   } (a) 2px solid (b) italic (c) border (d) 300px
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
6. 6.🖌️ How big is the text, in px?
   h1 {
     background-color: red;
     text-align: center;
     color: black;
     font-size: 12px;
   }
7. 7.🌈 Which colour is #ffffff? (a) blue (b) yellow (c) red (d) white
8. 8.⚖️ What colour is the text of this element?
   <h2 class="big" id="main">Hi</h2>
   CSS:
   #main { color: blue; }
   .big { color: orange; }
   h2 { color: yellow; } (a) yellow (b) orange (c) blue (d) red
9. 9.True or false: .menu is an element selector. (a) False (b) True
10. 10.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
11. 11.True or false: the content is the text or picture. (a) True (b) False
12. 12.True or false: HTML lays out the page. (a) True (b) False
13. 13.Which of these is margin? (a) the line round the box (b) space inside the border (c) the gap to other boxes (d) the gap round content
14. 14.Which of these is padding? (a) space outside the border (b) the gap to other boxes (c) the line round the box (d) the gap round content
15. 15.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
16. 16.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) border (d) margin
17. 17.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
      color: red;
    }
19. 19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    }
20. 20.True or false: padding is a solid or dotted edge. (a) False (b) True
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
22. 22.✍️ How does a CSS comment start? (a) # (b) <!-- (c) // (d) /*
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.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    #top { color: orange; }
    #top { color: red; } (a) orange (b) red (c) yellow (d) blue
25. 25.Which of these does HTML do? (a) counts down a timer (b) changes the text size (c) rounds box corners (d) gives the page structure
26. 26.🌈 Which hex code is yellow? (a) #0000ff (b) #ff00ff (c) #ffff00 (d) #ffffff
27. 27.🌈 Which colour of light is strongest in rgb(178, 61, 124)? (a) blue (b) red (c) green
28. 28.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) = (d) -
29. 29.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) white (c) yellow (d) red
30. 30.✍️ What is the selector in this CSS rule?
    p {
      border: 2px solid;
      padding: 8px;
      background-color: yellow;
    } (a) p (b) border (c) .note (d) 8px
31. 31.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
32. 32.Which of these is the border? (a) the text or picture (b) the gap round content (c) the gap to other boxes (d) a solid or dotted edge
33. 33.📦 In the box model, which part is the gap round content? (a) content (b) border (c) padding (d) margin
34. 34.✍️ Which sign ends each CSS declaration? (a) ; (b) , (c) : (d) .
35. 35.True or false: the border is space inside the border. (a) True (b) False
36. 36.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      background-color: white;
      color: orange;
      font-size: 12px;
    } (a) in the middle (b) on the left (c) on the right
37. 37.🎯 Can many elements share the same class? (a) No (b) Yes
38. 38.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
40. 40.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]

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