CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 753 · 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 flexbox property spaces boxes along a row? (a) display: flex (b) gap (c) flex-direction (d) justify-content
2. 2.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
3. 3.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 6px;
     }
   }
4. 4.🖌️ How big is the text, in px?
   p {
     background-color: purple;
     text-align: right;
     font-size: 16px;
     color: blue;
   }
5. 5.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   }
6. 6.Which of these does HTML do? (a) gives the page structure (b) sets colours and fonts (c) rounds box corners (d) lays out the page
7. 7.Which of these is padding? (a) the line round the box (b) the text or picture (c) space inside the border (d) space outside the border
8. 8.⚖️ What colour is the text of this element?
   <h1 class="note" id="hero">Hi</h1>
   CSS:
   h1 { color: green; }
   .note { color: purple; } (a) red (b) green (c) purple (d) black
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 290px;
     padding: 30px;
     border: 3px solid black;
     margin: 15px;
   }
10. 10.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) Z (c) G (d) J
11. 11.Which of these is padding? (a) a solid or dotted edge (b) space outside the border (c) the line round the box (d) the gap round content
12. 12.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
13. 13.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) justify-content (d) gap
14. 14.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
15. 15.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      border: 2px solid;
    }
17. 17.🔍 Which is the odd one out? (a) reacts to a button click (b) shows a pop-up message (c) changes the text size (d) changes the page live
18. 18.🖌️ Where does the text sit on its line?
    h1 {
      background-color: red;
      color: yellow;
      text-align: right;
      font-size: 28px;
    } (a) on the right (b) on the left (c) in the middle
19. 19.🎯 Which element does the selector #intro style? (a) <h2 class="star"> (b) <h1 id="main"> (c) <h1 id="intro"> (d) <h1 class="intro">
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      border: 2px solid;
    }
21. 21.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
22. 22.True or false: CSS gives the page structure. (a) True (b) False
23. 23.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) border (d) content
24. 24.✍️ Which property is set to red in this rule?
    p {
      text-align: center;
      color: red;
      margin: 10px;
      border: 2px solid;
    } (a) red (b) font-size (c) text-align (d) color
25. 25.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
26. 26.🌈 Which colour is #ffffff? (a) red (b) white (c) cyan (d) black
27. 27.🖌️ What colour is behind the letters?
    li {
      color: orange;
      background-color: black;
      font-size: 24px;
      text-align: left;
    } (a) blue (b) orange (c) black
28. 28.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
29. 29.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }
30. 30.🌈 Which hex code is yellow? (a) #ffffff (b) #00ffff (c) #ff0000 (d) #ffff00
31. 31.🎯 Which element does the selector #top style? (a) <p id="top"> (b) <p id="intro"> (c) <p class="top"> (d) <h1 class="star">
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
      background-color: yellow;
      border: 2px solid;
      font-weight: bold;
    }
34. 34.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) < > (d) ( )
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
36. 36.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="top">Hello</h1> (a) h2 (b) #intro (c) #menu (d) .menu
37. 37.🔍 Which is the odd one out? (a) adds space around boxes (b) lays out the page (c) makes a link (d) changes the text size
38. 38.🎯 Can many elements share the same class? (a) Yes (b) No
39. 39.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
40. 40.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes

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