CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 132 · 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 much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 160px;
     padding: 15px;
     border: 5px solid black;
     margin: 0px;
   }
2. 2.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
3. 3.✍️ What is the selector in this CSS rule?
   h2 {
     font-weight: bold;
     padding: 8px;
   } (a) font-weight (b) 8px (c) h1 (d) h2
4. 4.💪 Which flexbox property turns on flexbox? (a) gap (b) justify-content (c) display: flex (d) align-items
5. 5.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     margin: 10px;
     font-size: 20px;
     padding: 8px;
   }
7. 7.True or false: JavaScript makes a form box. (a) True (b) False
8. 8.⚖️ What colour is the text of this element?
   <h2 class="big" id="main">Hi</h2>
   CSS:
   .big { color: blue; }
   h2 { color: yellow; } (a) yellow (b) white (c) black (d) blue
9. 9.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) red (c) yellow (d) black
10. 10.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
11. 11.Which of these does CSS do? (a) gives the page structure (b) sets colours and fonts (c) checks a quiz answer (d) shows a pop-up message
12. 12.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      color: white;
      background-color: green;
      font-size: 28px;
    }
13. 13.Which of these does CSS do? (a) reacts to a button click (b) shows a pop-up message (c) puts a picture on a page (d) lays out the page
14. 14.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      font-style: italic;
      border: 2px solid;
    }
15. 15.🎯 Which element does the selector .note style? (a) <h1 class="note"> (b) <h2 class="red"> (c) <h1 class="big"> (d) <h1 id="note">
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
17. 17.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: black; }
    p { color: purple; } (a) white (b) blue (c) black (d) purple
18. 18.✍️ What value is given to margin in this rule?
    .note {
      font-weight: bold;
      margin: 10px;
    } (a) bold (b) margin (c) 8px (d) 10px
19. 19.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
20. 20.✍️ Which property is set to bold in this rule?
    #top {
      font-weight: bold;
      border: 2px solid;
    } (a) width (b) font-weight (c) border (d) bold
21. 21.🖌️ Which CSS property centres a heading? (a) text-align (b) font-weight (c) background-color (d) color
22. 22.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
23. 23.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
24. 24.🖌️ How big is the text, in px?
    li {
      color: red;
      text-align: right;
      font-size: 20px;
      background-color: orange;
    }
25. 25.Which of these is padding? (a) the text or picture (b) the gap to other boxes (c) a solid or dotted edge (d) space inside the border
26. 26.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: black; }
    #logo { color: orange; } (a) black (b) white (c) yellow (d) orange
27. 27.💪 Which flexbox property sets space between boxes? (a) display: flex (b) gap (c) justify-content (d) align-items
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 400px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
29. 29.🔍 Which is the odd one out? (a) lays out the page (b) rounds box corners (c) makes headings and lists (d) sets colours and fonts
30. 30.Which of these is the border? (a) space inside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the text or picture
31. 31.🌈 Which colour is rgb(255, 255, 255)? (a) blue (b) cyan (c) black (d) white
32. 32.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) adds space around boxes (d) counts down a timer
33. 33.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) = (d) -
34. 34.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) flex-direction (d) align-items
35. 35.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-end (d) flex-start
36. 36.✍️ What value is given to text-align in this rule?
    body {
      color: red;
      text-align: center;
      border: 2px solid;
    } (a) text-align (b) yellow (c) center (d) 10px
37. 37.🌈 Which hex code is blue? (a) #00ff00 (b) #0000ff (c) #ff00ff (d) #ff0000
38. 38.🌈 Which colour is #ff00ff? (a) bright green (b) magenta (c) blue (d) cyan
39. 39.🌈 Which hex code is cyan? (a) #ff0000 (b) #00ffff (c) #ff00ff (d) #0000ff
40. 40.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start

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