CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 673 · 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 lines boxes up across? (a) justify-content (b) display: flex (c) gap (d) align-items
2. 2.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
3. 3.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   } (a) No (b) Yes
4. 4.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 14px;
     }
   }
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 300px;
     justify-content: center;
   }
   Inside are 2 boxes, each 100px wide (no margins).
6. 6.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     font-style: italic;
   }
8. 8.🖌️ Which CSS property makes the text bold? (a) color (b) font-size (c) background-color (d) font-weight
9. 9.Which of these does CSS do? (a) makes a link (b) checks a quiz answer (c) rounds box corners (d) shows a pop-up message
10. 10.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
11. 11.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
12. 12.Which of these does JavaScript do? (a) sets colours and fonts (b) makes headings and lists (c) counts down a timer (d) adds space around boxes
13. 13.🧩 Which language reacts to a button click? (a) JavaScript (b) HTML (c) CSS
14. 14.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
15. 15.🎨 Which tag holds CSS inside the head? (a) <css> (b) <style> (c) <script> (d) <body>
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }
17. 17.🌈 Which hex code is blue? (a) #0000ff (b) #ff0000 (c) #00ffff (d) #00ff00
18. 18.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
19. 19.🖌️ Which CSS property makes letters bigger? (a) color (b) font-family (c) font-size (d) font-weight
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
21. 21.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
22. 22.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: green; }
    #top { color: blue; } (a) purple (b) blue (c) green (d) yellow
23. 23.✍️ Which property is set to red in this rule?
    h1 {
      font-weight: bold;
      color: red;
    } (a) red (b) font-size (c) text-align (d) color
24. 24.🌈 Which colour is #ff0000? (a) blue (b) bright green (c) red (d) cyan
25. 25.True or false: CSS gives the page structure. (a) True (b) False
26. 26.✍️ Which property is set to 8px in this rule?
    .box {
      padding: 8px;
      border: 2px solid;
    } (a) padding (b) border (c) font-weight (d) 8px
27. 27.🖌️ Which CSS property colours behind the text? (a) font-family (b) text-align (c) background-color (d) color
28. 28.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) red (c) black (d) bright green
29. 29.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
30. 30.🖌️ What colour is behind the letters?
    h2 {
      background-color: green;
      font-size: 32px;
      text-align: left;
      color: purple;
    } (a) purple (b) white (c) green
31. 31.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      font-size: 20px;
      color: red;
    } (a) margin (b) 20px (c) h1 (d) h2
32. 32.🖌️ What colour are the letters?
    p {
      text-align: left;
      background-color: red;
      color: yellow;
      font-size: 40px;
    } (a) white (b) red (c) yellow
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
34. 34.🌈 Which colour is rgb(255, 255, 255)? (a) blue (b) red (c) cyan (d) white
35. 35.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
36. 36.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
37. 37.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
38. 38.✍️ Which property is set to 10px in this rule?
    li {
      margin: 10px;
      font-weight: bold;
      font-size: 20px;
      border: 2px solid;
    } (a) 10px (b) font-weight (c) margin (d) padding
39. 39.🎯 Which CSS selector matches this element?
    <h1 class="box" id="top">Hello</h1> (a) .box (b) h2 (c) #intro (d) #box
40. 40.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) background-color (c) color (d) font-family

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