CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 31 · 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 language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 260px;
     padding: 30px;
     border: 1px solid black;
     margin: 5px;
   }
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     font-size: 32px;
     color: black;
     text-align: center;
     background-color: green;
   } (a) on the right (b) in the middle (c) on the left
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     border: 2px solid;
     padding: 8px;
     color: red;
   }
5. 5.⚖️ What colour is the text of this element?
   <h2 class="red" id="end">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: orange; } (a) green (b) orange (c) yellow (d) blue
6. 6.True or false: JavaScript puts a picture on a page. (a) False (b) True
7. 7.✍️ What is the selector in this CSS rule?
   .box {
     margin: 10px;
     padding: 8px;
   } (a) 8px (b) margin (c) .box (d) h2
8. 8.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) font-size (c) background-color (d) color
9. 9.✍️ What is the selector in this CSS rule?
   body {
     margin: 10px;
     border: 2px solid;
     text-align: center;
     font-weight: bold;
   } (a) body (b) 2px solid (c) margin (d) .box
10. 10.True or false: margin is space outside the border. (a) True (b) False
11. 11.True or false: body is an element selector. (a) True (b) False
12. 12.🎯 Which element does the selector .menu style? (a) <li class="big"> (b) <h2 class="note"> (c) <h2 class="menu"> (d) <h2 id="menu">
13. 13.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
14. 14.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
15. 15.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
16. 16.🖌️ What colour is behind the letters?
    p {
      font-size: 36px;
      text-align: left;
      background-color: purple;
      color: yellow;
    } (a) yellow (b) purple (c) white
17. 17.✍️ Which property is set to center in this rule?
    .box {
      background-color: yellow;
      text-align: center;
      color: red;
      width: 300px;
    } (a) background-color (b) center (c) margin (d) text-align
18. 18.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
19. 19.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
20. 20.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
21. 21.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
22. 22.Which of these does HTML do? (a) makes headings and lists (b) checks a quiz answer (c) shows a pop-up message (d) rounds box corners
23. 23.✍️ Which property is set to bold in this rule?
    .note {
      font-weight: bold;
      padding: 8px;
      border: 2px solid;
      text-align: center;
    } (a) width (b) border (c) font-weight (d) bold
24. 24.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      margin: 10px;
      background-color: yellow;
      text-align: center;
    } (a) font-style (b) 10px (c) #top (d) .note
25. 25.🎯 Which CSS selector matches this element?
    <div class="box" id="logo">Hello</div> (a) div (b) span (c) .star (d) .logo
26. 26.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) center (d) flex-end
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
      font-size: 20px;
      font-style: italic;
      background-color: yellow;
    }
28. 28.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    #hero { color: red; } (a) black (b) purple (c) white (d) red
29. 29.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
30. 30.✍️ In color: blue; which part is the property? (a) ; (b) : (c) blue (d) color
31. 31.🖌️ Which CSS property centres a heading? (a) font-size (b) font-family (c) text-align (d) background-color
32. 32.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) turned off (d) 800px or narrower
33. 33.✍️ Which property is set to 8px in this rule?
    p {
      text-align: center;
      padding: 8px;
      color: red;
    } (a) border (b) 8px (c) font-weight (d) padding
34. 34.🖌️ What colour are the letters?
    p {
      text-align: center;
      color: red;
      font-size: 36px;
      background-color: yellow;
    } (a) yellow (b) green (c) red
35. 35.Which of these does HTML do? (a) adds space around boxes (b) lays out the page (c) counts down a timer (d) makes a link
36. 36.🎯 What kind of selector is li? (a) an id selector (b) an element selector (c) a class selector
37. 37.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) style (d) src
38. 38.What does color do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) centres a heading
39. 39.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) .intro (b) span (c) div (d) #big
40. 40.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: green; }
    #hero { color: white; }
    p { color: purple; } (a) white (b) purple (c) green (d) yellow

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