CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 644 · 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 wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 80px;
     padding: 30px;
     border: 4px solid black;
     margin: 5px;
   }
2. 2.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
3. 3.⚖️ What colour is the text of this element?
   <h2 class="red" id="main">Hi</h2>
   CSS:
   h2 { color: white; }
   .red { color: orange; }
   #main { color: yellow; } (a) orange (b) white (c) red (d) yellow
4. 4.🖌️ What colour is behind the letters?
   p {
     color: black;
     font-size: 40px;
     text-align: left;
     background-color: blue;
   } (a) black (b) green (c) blue
5. 5.🌈 Which colour is #000000? (a) red (b) bright green (c) yellow (d) black
6. 6.✍️ Which property is set to 20px in this rule?
   #top {
     border: 2px solid;
     color: red;
     font-weight: bold;
     font-size: 20px;
   } (a) text-align (b) font-size (c) background-color (d) 20px
7. 7.✍️ Which property is set to 20px in this rule?
   .note {
     font-weight: bold;
     margin: 10px;
     width: 300px;
     font-size: 20px;
   } (a) 20px (b) text-align (c) font-size (d) background-color
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-size: 20px;
   }
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 280px;
     padding: 25px;
     border: 3px solid black;
     margin: 5px;
   }
10. 10.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
11. 11.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      border: 2px solid;
      width: 300px;
    }
13. 13.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: orange; }
    #intro { color: black; } (a) orange (b) blue (c) black (d) white
14. 14.What does background-color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
15. 15.Which of these is padding? (a) the line round the box (b) the text or picture (c) space outside the border (d) space inside the border
16. 16.🖌️ How big is the text, in px?
    h2 {
      font-size: 40px;
      text-align: left;
      color: red;
      background-color: blue;
    }
17. 17.🎯 Which CSS selector matches this element?
    <li class="note" id="main">Hello</li> (a) .main (b) #logo (c) #note (d) .note
18. 18.Which of these is the border? (a) the gap round content (b) the gap to other boxes (c) space inside the border (d) the line round the box
19. 19.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
20. 20.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) gap (d) align-items
21. 21.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 3 (d) 4
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
23. 23.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
24. 24.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
25. 25.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
26. 26.True or false: HTML makes a form box. (a) True (b) False
27. 27.✍️ Which property is set to center in this rule?
    #top {
      color: red;
      font-weight: bold;
      text-align: center;
      border: 2px solid;
    } (a) center (b) background-color (c) text-align (d) margin
28. 28.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    }
29. 29.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 100 (d) 255
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 10px;
      border: 1px solid black;
      margin: 15px;
    }
31. 31.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    #main { color: yellow; }
    .big { color: orange; }
    h2 { color: black; } (a) black (b) yellow (c) blue (d) orange
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
    }
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      border: 2px solid;
    }
34. 34.✍️ Which property is set to 2px solid in this rule?
    .box {
      color: red;
      border: 2px solid;
    } (a) 2px solid (b) width (c) border (d) font-style
35. 35.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <style> (d) <css>
36. 36.🎯 Which CSS selector matches this element?
    <div class="note" id="logo">Hello</div> (a) .logo (b) #note (c) #end (d) div
37. 37.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 300px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
39. 39.🔍 Which is the odd one out? (a) rounds box corners (b) changes the text size (c) sets colours and fonts (d) makes headings and lists
40. 40.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: orange; }
    .big { color: blue; } (a) purple (b) yellow (c) blue (d) orange

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