CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 227 · 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.💪 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).
2. 2.Which of these is margin? (a) the text or picture (b) the gap round content (c) the line round the box (d) the gap to other boxes
3. 3.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
4. 4.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) display: flex (c) align-items (d) gap
5. 5.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) J (c) Z (d) G
6. 6.Which of these is the content? (a) space inside the border (b) the gap round content (c) the text or picture (d) space outside the border
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 140px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 40px wide (no margins).
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 20px;
     border: 3px solid black;
     margin: 10px;
   }
9. 9.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
10. 10.✍️ How does a CSS comment start? (a) <!-- (b) # (c) /* (d) //
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
      font-weight: bold;
      width: 300px;
      color: red;
    }
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 280px;
      padding: 30px;
      border: 1px solid black;
      margin: 10px;
    }
13. 13.🖌️ Which CSS property colours behind the text? (a) color (b) background-color (c) font-size (d) font-weight
14. 14.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
15. 15.Which of these is padding? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) space inside the border
16. 16.🖌️ What colour are the letters?
    li {
      text-align: center;
      font-size: 16px;
      color: purple;
      background-color: orange;
    } (a) green (b) orange (c) purple
17. 17.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 5px;
      border: 1px solid black;
      margin: 20px;
    }
19. 19.🎯 Which element does the selector #top style? (a) <h2 id="intro"> (b) <h2 id="top"> (c) <h2 class="top"> (d) <li class="menu">
20. 20.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) space-between (d) flex-end
21. 21.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
22. 22.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
23. 23.📦 In the box model, which part is the gap round content? (a) content (b) padding (c) margin (d) border
24. 24.🧩 Which language makes a form box? (a) CSS (b) HTML (c) JavaScript
25. 25.Which of these does HTML do? (a) puts a picture on a page (b) reacts to a button click (c) adds space around boxes (d) lays out the page
26. 26.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) h1 (b) p (c) #intro (d) #big
27. 27.Which of these does CSS do? (a) changes the page live (b) rounds box corners (c) shows a pop-up message (d) reacts to a button click
28. 28.🌈 Which colour is #00ffff? (a) cyan (b) bright green (c) red (d) black
29. 29.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
30. 30.🎯 Can many elements share the same class? (a) Yes (b) No
31. 31.🖌️ How big is the text, in px?
    h1 {
      font-size: 20px;
      color: purple;
      background-color: black;
      text-align: left;
    }
32. 32.📦 In the box model, which part is the text or picture? (a) content (b) border (c) margin (d) padding
33. 33.What does text-align do? (a) colours behind the text (b) makes the text bold (c) centres a heading (d) sets the letter colour
34. 34.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
35. 35.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
36. 36.✍️ What value is given to font-size in this rule?
    #top {
      padding: 8px;
      text-align: center;
      font-style: italic;
      font-size: 20px;
    } (a) 20px (b) font-size (c) center (d) yellow
37. 37.🎯 Which element does the selector span style? (a) <h2 id="logo"> (b) <h1 class="star"> (c) <p> (d) <span class="star">
38. 38.True or false: #top is an id selector. (a) True (b) False
39. 39.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
40. 40.🔍 Which is the odd one out? (a) gives the page structure (b) reacts to a button click (c) makes a link (d) makes headings and lists

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