CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 521 · 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 of these does HTML do? (a) makes a form box (b) adds space around boxes (c) reacts to a button click (d) changes the page live
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 60px;
     padding: 25px;
     border: 2px solid black;
     margin: 15px;
   }
3. 3.✍️ What is the selector in this CSS rule?
   h2 {
     font-weight: bold;
     padding: 8px;
     color: red;
   } (a) 8px (b) font-weight (c) h1 (d) h2
4. 4.🌈 In #0000a2 the blue part is the hex number a2. What is it as a normal number?
5. 5.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) align-items (c) gap (d) display: flex
6. 6.📦 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: 15px;
     border: 1px solid black;
     margin: 0px;
   }
7. 7.🔍 Which is the odd one out? (a) shows a pop-up message (b) reacts to a button click (c) makes headings and lists (d) checks a quiz answer
8. 8.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   }
9. 9.🎯 Which CSS selector matches this element?
   <span class="star" id="logo">Hello</span> (a) .logo (b) .menu (c) #logo (d) p
10. 10.🎯 Which CSS selector matches this element?
    <li class="red" id="top">Hello</li> (a) .top (b) div (c) #red (d) #top
11. 11.🖌️ How big is the text, in px?
    h1 {
      background-color: black;
      color: orange;
      font-size: 24px;
      text-align: center;
    }
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
13. 13.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      background-color: yellow;
      color: red;
      font-weight: bold;
      width: 300px;
    } (a) h1 (b) red (c) background-color (d) h2
15. 15.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    #end { color: orange; }
    #end { color: yellow; } (a) orange (b) yellow (c) white (d) red
16. 16.🖌️ What colour are the letters?
    p {
      text-align: right;
      background-color: purple;
      color: red;
      font-size: 12px;
    } (a) blue (b) purple (c) red
17. 17.Which of these does HTML do? (a) changes the text size (b) lays out the page (c) changes the page live (d) gives the page structure
18. 18.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    .red { color: white; }
    .red { color: green; } (a) purple (b) green (c) white (d) orange
19. 19.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      font-size: 36px;
      text-align: center;
      color: white;
    } (a) red (b) yellow (c) white
20. 20.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one image (d) only one word
21. 21.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    h2 { color: green; }
    .star { color: blue; } (a) black (b) blue (c) red (d) green
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: green; }
    #hero { color: red; } (a) purple (b) green (c) red (d) yellow
24. 24.✍️ Which property is set to 8px in this rule?
    h1 {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
    } (a) font-weight (b) padding (c) border (d) 8px
25. 25.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
26. 26.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
27. 27.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) flex-end (d) center
28. 28.🖌️ How big is the text, in px?
    h1 {
      color: orange;
      text-align: right;
      font-size: 28px;
      background-color: black;
    }
29. 29.True or false: .big is a class selector. (a) True (b) False
30. 30.Which of these is padding? (a) the text or picture (b) the gap to other boxes (c) space outside the border (d) space inside the border
31. 31.✍️ Which property is set to center in this rule?
    p {
      text-align: center;
      padding: 8px;
      margin: 10px;
    } (a) background-color (b) text-align (c) center (d) margin
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      background-color: yellow;
    }
33. 33.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
34. 34.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    .menu { color: red; }
    #intro { color: green; }
    h2 { color: white; } (a) red (b) white (c) green (d) black
35. 35.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    p { color: white; }
    #main { color: purple; } (a) white (b) purple (c) blue (d) green
36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
37. 37.Which of these is the border? (a) the line round the box (b) space outside the border (c) the gap to other boxes (d) the gap round content
38. 38.✍️ Which property is set to 20px in this rule?
    .note {
      text-align: center;
      font-size: 20px;
    } (a) font-size (b) 20px (c) text-align (d) background-color
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
40. 40.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).

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