CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 864 · 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 many declarations (property: value pairs) are in this rule?
   #top {
     font-weight: bold;
     text-align: center;
     border: 2px solid;
   }
2. 2.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
3. 3.💪 Which justify-content value equal gaps, none at ends? (a) center (b) space-between (c) flex-start (d) flex-end
4. 4.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
5. 5.Which of these does HTML do? (a) rounds box corners (b) gives the page structure (c) lays out the page (d) adds space around boxes
6. 6.⚖️ What colour is the text of this element?
   <p class="big" id="end">Hi</p>
   CSS:
   .big { color: green; }
   .big { color: white; } (a) green (b) purple (c) orange (d) white
7. 7.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 30px;
     }
   } (a) Yes (b) No
8. 8.✍️ What value is given to font-size in this rule?
   .box {
     font-size: 20px;
     background-color: yellow;
     text-align: center;
   } (a) 20px (b) center (c) font-size (d) yellow
9. 9.True or false: HTML lays out the page. (a) False (b) True
10. 10.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 100 (c) 255 (d) 1000
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-weight: bold;
    }
12. 12.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <script> (d) <body>
13. 13.Which of these does HTML do? (a) makes headings and lists (b) checks a quiz answer (c) lays out the page (d) changes the page live
14. 14.True or false: #end is an id selector. (a) True (b) False
15. 15.Which of these does JavaScript do? (a) rounds box corners (b) adds space around boxes (c) lays out the page (d) checks a quiz answer
16. 16.🌈 Which colour is rgb(255, 255, 0)? (a) bright green (b) yellow (c) black (d) white
17. 17.True or false: li is an element selector. (a) True (b) False
18. 18.🌈 Which colour is #00ffff? (a) black (b) bright green (c) cyan (d) magenta
19. 19.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
20. 20.True or false: JavaScript shows a pop-up message. (a) False (b) True
21. 21.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
22. 22.Which of these is margin? (a) space inside the border (b) space outside the border (c) a solid or dotted edge (d) the gap round content
23. 23.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
24. 24.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-end (d) flex-start
25. 25.🖌️ What colour are the letters?
    h2 {
      color: orange;
      text-align: center;
      font-size: 40px;
      background-color: yellow;
    } (a) orange (b) yellow (c) purple
26. 26.🖌️ Which CSS property colours behind the text? (a) font-size (b) text-align (c) background-color (d) color
27. 27.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      margin: 10px;
      text-align: center;
    } (a) padding (b) 10px (c) .note (d) p
28. 28.Which of these is padding? (a) the gap to other boxes (b) space inside the border (c) space outside the border (d) the text or picture
29. 29.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
30. 30.🎯 Which CSS selector matches this element?
    <h1 class="star" id="main">Hello</h1> (a) h2 (b) #logo (c) .menu (d) .star
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
32. 32.💪 Which flexbox property picks row or column? (a) display: flex (b) gap (c) justify-content (d) flex-direction
33. 33.🎯 What kind of selector is #end? (a) an element selector (b) a class selector (c) an id selector
34. 34.🖌️ How big is the text, in px?
    h2 {
      font-size: 24px;
      text-align: right;
      color: green;
      background-color: black;
    }
35. 35.🖌️ How big is the text, in px?
    p {
      background-color: green;
      font-size: 24px;
      color: white;
      text-align: center;
    }
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
37. 37.✍️ What is the selector in this CSS rule?
    p {
      width: 300px;
      font-style: italic;
    } (a) p (b) .note (c) italic (d) width
38. 38.🖌️ Which CSS property makes the text bold? (a) font-family (b) color (c) background-color (d) font-weight
39. 39.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
40. 40.True or false: CSS makes headings and lists. (a) True (b) False

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