CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 123 · 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 of these is padding? (a) a solid or dotted edge (b) the gap to other boxes (c) space outside the border (d) space inside the border
2. 2.Which of these does JavaScript do? (a) adds space around boxes (b) counts down a timer (c) puts a picture on a page (d) lays out the page
3. 3.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
4. 4.🎯 Which element does the selector #main style? (a) <li class="big"> (b) <h2 id="main"> (c) <h2 class="main"> (d) <h2 id="logo">
5. 5.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
6. 6.What does font-weight do? (a) sets the letter colour (b) picks the font style (c) makes letters bigger (d) makes the text bold
7. 7.✍️ Which sign ends each CSS declaration? (a) . (b) : (c) , (d) ;
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 30px;
     border: 1px solid black;
     margin: 15px;
   }
9. 9.Which of these does CSS do? (a) reacts to a button click (b) changes the page live (c) makes headings and lists (d) lays out the page
10. 10.🎯 Which sign starts a class selector? (a) . (b) # (c) @ (d) &
11. 11.🖌️ What colour are the letters?
    p {
      text-align: left;
      background-color: red;
      color: blue;
      font-size: 12px;
    } (a) black (b) red (c) blue
12. 12.What does background-color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes the text bold
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
14. 14.✍️ What is the selector in this CSS rule?
    body {
      background-color: yellow;
      text-align: center;
      border: 2px solid;
    } (a) background-color (b) body (c) center (d) .box
15. 15.✍️ Which property is set to 2px solid in this rule?
    li {
      font-size: 20px;
      border: 2px solid;
    } (a) width (b) border (c) font-style (d) 2px solid
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 15px;
      border: 1px solid black;
      margin: 15px;
    }
17. 17.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) white (c) red (d) magenta
18. 18.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
20. 20.🖌️ What colour is behind the letters?
    p {
      color: orange;
      text-align: center;
      background-color: black;
      font-size: 36px;
    } (a) black (b) white (c) orange
21. 21.🔍 Which is the odd one out? (a) puts a picture on a page (b) rounds box corners (c) changes the text size (d) adds space around boxes
22. 22.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
23. 23.Which of these does JavaScript do? (a) rounds box corners (b) changes the page live (c) makes a link (d) sets colours and fonts
24. 24.🖌️ How big is the text, in px?
    h2 {
      color: blue;
      text-align: left;
      background-color: purple;
      font-size: 24px;
    }
25. 25.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-size (c) font-family (d) background-color
26. 26.✍️ What value is given to background-color in this rule?
    h1 {
      color: red;
      background-color: yellow;
      margin: 10px;
    } (a) 8px (b) yellow (c) 10px (d) background-color
27. 27.🎨 A CSS file usually ends with which extension? (a) .png (b) .css (c) .html (d) .js
28. 28.True or false: img is an id selector. (a) True (b) False
29. 29.📦 In the box model, which part is the gap round content? (a) margin (b) padding (c) border (d) content
30. 30.🎯 Which sign starts an id selector? (a) . (b) # (c) & (d) @
31. 31.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
32. 32.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
33. 33.🎯 Which element does the selector .red style? (a) <p id="red"> (b) <p class="red"> (c) <h1 class="star"> (d) <p class="box">
34. 34.🌈 Which hex code is cyan? (a) #00ff00 (b) #00ffff (c) #0000ff (d) #ffff00
35. 35.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
36. 36.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) padding (d) margin
37. 37.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
38. 38.🎯 Can many elements share the same class? (a) Yes (b) No
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 3px solid black;
      margin: 5px;
    }

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