CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 220 · 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.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
2. 2.🖌️ What colour is behind the letters?
   p {
     color: black;
     background-color: blue;
     text-align: left;
     font-size: 36px;
   } (a) black (b) blue (c) purple
3. 3.✍️ What value is given to padding in this rule?
   .box {
     padding: 8px;
     text-align: center;
   } (a) 2px solid (b) bold (c) 8px (d) padding
4. 4.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) color (d) font-size
5. 5.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) gap (d) align-items
6. 6.🎯 Which CSS selector matches this element?
   <span class="note" id="hero">Hello</span> (a) #note (b) .note (c) p (d) #top
7. 7.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 4 (d) 3
8. 8.True or false: #logo is a class selector. (a) True (b) False
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: 250px;
     padding: 5px;
     border: 4px solid black;
     margin: 15px;
   }
10. 10.True or false: p is an element selector. (a) False (b) True
11. 11.📦 In the box model, which part is the gap round content? (a) border (b) content (c) padding (d) margin
12. 12.True or false: HTML checks a quiz answer. (a) True (b) False
13. 13.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 190px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
14. 14.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .png (d) .html
15. 15.True or false: li is an element selector. (a) False (b) True
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: green; }
    p { color: red; } (a) black (b) red (c) orange (d) green
17. 17.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
18. 18.✍️ What is the selector in this CSS rule?
    p {
      text-align: center;
      padding: 8px;
      margin: 10px;
    } (a) p (b) 8px (c) .note (d) text-align
19. 19.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) puts a picture on a page (d) rounds box corners
20. 20.✍️ Which property is set to center in this rule?
    #top {
      border: 2px solid;
      text-align: center;
      padding: 8px;
      margin: 10px;
    } (a) text-align (b) background-color (c) margin (d) center
21. 21.🖌️ How big is the text, in px?
    h1 {
      color: green;
      background-color: yellow;
      font-size: 28px;
      text-align: left;
    }
22. 22.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
23. 23.🎯 Which element does the selector #intro style? (a) <div id="main"> (b) <span class="red"> (c) <div id="intro"> (d) <div class="intro">
24. 24.✍️ What value is given to border in this rule?
    body {
      border: 2px solid;
      font-weight: bold;
    } (a) 300px (b) 2px solid (c) italic (d) border
25. 25.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    #main { color: green; }
    p { color: yellow; } (a) green (b) yellow (c) blue (d) purple
26. 26.🌈 Which hex code is cyan? (a) #ff0000 (b) #00ffff (c) #000000 (d) #00ff00
27. 27.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
28. 28.What does background-color do? (a) makes letters bigger (b) sets the letter colour (c) makes the text bold (d) colours behind the text
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    .note { color: yellow; }
    .note { color: green; } (a) green (b) blue (c) yellow (d) red
30. 30.🖌️ What colour is behind the letters?
    h1 {
      font-size: 36px;
      text-align: left;
      color: white;
      background-color: purple;
    } (a) yellow (b) purple (c) white
31. 31.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    .red { color: orange; }
    p { color: red; } (a) yellow (b) black (c) orange (d) red
32. 32.🔍 Which is the odd one out? (a) adds space around boxes (b) sets colours and fonts (c) lays out the page (d) shows a pop-up message
33. 33.🖌️ What colour is behind the letters?
    li {
      color: yellow;
      font-size: 20px;
      text-align: center;
      background-color: black;
    } (a) yellow (b) black (c) orange
34. 34.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
35. 35.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
36. 36.✍️ What value is given to padding in this rule?
    h1 {
      padding: 8px;
      font-weight: bold;
      font-size: 20px;
    } (a) bold (b) 2px solid (c) 8px (d) padding
37. 37.Which of these is the border? (a) space outside the border (b) space inside the border (c) the gap round content (d) a solid or dotted edge
38. 38.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
      margin: 10px;
      font-style: italic;
      color: red;
    }

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