CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 28 · 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 does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
2. 2.🎯 Which CSS selector matches this element?
   <span class="menu" id="top">Hello</span> (a) p (b) #menu (c) .note (d) #top
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 50px;
     padding: 25px;
     border: 2px solid black;
     margin: 15px;
   }
4. 4.🖌️ What colour is behind the letters?
   h1 {
     background-color: black;
     font-size: 32px;
     color: green;
     text-align: center;
   } (a) orange (b) green (c) black
5. 5.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) gap
6. 6.True or false: JavaScript shows a pop-up message. (a) False (b) True
7. 7.✍️ What is the selector in this CSS rule?
   .note {
     color: red;
     font-size: 20px;
     text-align: center;
   } (a) 20px (b) #top (c) .note (d) color
8. 8.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
9. 9.🖌️ Which CSS property colours behind the text? (a) text-align (b) color (c) font-size (d) background-color
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 10px;
      border: 3px solid black;
      margin: 15px;
    }
11. 11.🖌️ What colour is behind the letters?
    li {
      color: black;
      background-color: blue;
      font-size: 16px;
      text-align: right;
    } (a) purple (b) black (c) blue
12. 12.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: red; }
    .red { color: black; } (a) green (b) red (c) white (d) black
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
14. 14.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one word (d) only one image
15. 15.🔍 Which is the odd one out? (a) changes the page live (b) makes a link (c) counts down a timer (d) reacts to a button click
16. 16.Which of these does JavaScript do? (a) sets colours and fonts (b) changes the page live (c) puts a picture on a page (d) rounds box corners
17. 17.✍️ In color: blue; which part is the property? (a) color (b) : (c) ; (d) blue
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
19. 19.🖌️ What colour is behind the letters?
    li {
      background-color: yellow;
      color: white;
      font-size: 20px;
      text-align: center;
    } (a) yellow (b) white (c) black
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
22. 22.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
24. 24.Which of these is padding? (a) the text or picture (b) space outside the border (c) the gap round content (d) the gap to other boxes
25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
26. 26.🎯 Which element does the selector #main style? (a) <p id="main"> (b) <p id="logo"> (c) <h1 class="big"> (d) <p class="main">
27. 27.✍️ What is the selector in this CSS rule?
    h1 {
      font-size: 20px;
      text-align: center;
      margin: 10px;
      font-style: italic;
    } (a) font-size (b) center (c) p (d) h1
28. 28.True or false: .card is an element selector. (a) False (b) True
29. 29.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
30. 30.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
31. 31.Which of these does HTML do? (a) adds space around boxes (b) gives the page structure (c) shows a pop-up message (d) reacts to a button click
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
33. 33.🌈 Which hex code is white? (a) #0000ff (b) #ffffff (c) #00ffff (d) #ff0000
34. 34.Which of these does JavaScript do? (a) checks a quiz answer (b) puts a picture on a page (c) sets colours and fonts (d) makes a link
35. 35.🖌️ What colour is behind the letters?
    h1 {
      background-color: purple;
      color: orange;
      text-align: right;
      font-size: 28px;
    } (a) purple (b) orange (c) black
36. 36.True or false: padding is the line round the box. (a) False (b) True
37. 37.🌈 Which colour is #ffff00? (a) blue (b) cyan (c) yellow (d) white
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    .star { color: red; }
    h2 { color: blue; }
    #intro { color: orange; } (a) red (b) blue (c) purple (d) orange
40. 40.🎯 Which sign starts a class selector? (a) . (b) & (c) @ (d) #

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