CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 613 · 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 CSS property centres a heading? (a) background-color (b) color (c) text-align (d) font-weight
2. 2.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
3. 3.📦 In the box model, which part is a solid or dotted edge? (a) border (b) padding (c) content (d) margin
4. 4.🎯 Which CSS selector matches this element?
   <p class="star" id="hero">Hello</p> (a) .menu (b) h1 (c) .star (d) #top
5. 5.🧩 Which language changes the text size? (a) JavaScript (b) HTML (c) CSS
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 180px;
     padding: 25px;
     border: 5px solid black;
     margin: 5px;
   }
7. 7.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
8. 8.✍️ Which property is set to yellow in this rule?
   #top {
     color: red;
     background-color: yellow;
   } (a) margin (b) background-color (c) padding (d) yellow
9. 9.✍️ What value is given to text-align in this rule?
   body {
     font-size: 20px;
     text-align: center;
   } (a) text-align (b) 10px (c) yellow (d) center
10. 10.🌈 Which colour is #00ff00? (a) red (b) bright green (c) blue (d) cyan
11. 11.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
13. 13.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 400px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
14. 14.✍️ Which property is set to italic in this rule?
    li {
      width: 300px;
      font-size: 20px;
      margin: 10px;
      font-style: italic;
    } (a) font-size (b) color (c) font-style (d) italic
15. 15.✍️ How does a CSS comment start? (a) /* (b) // (c) # (d) <!--
16. 16.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    #top { color: orange; }
    #top { color: purple; } (a) purple (b) orange (c) black (d) yellow
17. 17.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) font-size (d) font-weight
18. 18.🖌️ Where does the text sit on its line?
    p {
      color: purple;
      background-color: red;
      font-size: 12px;
      text-align: center;
    } (a) in the middle (b) on the right (c) on the left
19. 19.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) gap (d) align-items
20. 20.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
21. 21.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      font-size: 12px;
      background-color: purple;
      color: green;
    }
22. 22.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) exactly 1000px (d) turned off
23. 23.Which of these is the border? (a) space outside the border (b) space inside the border (c) the text or picture (d) the line round the box
24. 24.📦 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: 1px solid black;
      margin: 0px;
    }
25. 25.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the viewport meta tag (d) the hr tag
26. 26.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
27. 27.🌈 Which colour of light is strongest in rgb(118, 21, 157)? (a) red (b) blue (c) green
28. 28.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) color (d) :
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: black; }
    #hero { color: green; } (a) red (b) green (c) yellow (d) black
30. 30.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
31. 31.📦 In the box model, which part is the gap to other boxes? (a) margin (b) border (c) content (d) padding
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 290px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
33. 33.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
34. 34.🌈 Which colour is #ffffff? (a) cyan (b) red (c) white (d) bright green
35. 35.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      background-color: yellow;
      width: 300px;
      color: red;
    } (a) p (b) padding (c) .note (d) yellow
36. 36.🌈 Which hex code is blue? (a) #ffff00 (b) #0000ff (c) #ffffff (d) #ff0000
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
38. 38.🎯 Which element does the selector .note style? (a) <span id="note"> (b) <p class="red"> (c) <span class="big"> (d) <span class="note">
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 120px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
40. 40.🖌️ How big is the text, in px?
    p {
      color: red;
      text-align: right;
      font-size: 24px;
      background-color: green;
    }

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