CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 263 · 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 sets space between boxes? (a) justify-content (b) gap (c) flex-direction (d) display: flex
2. 2.⚖️ What colour is the text of this element?
   <h2 class="menu" id="logo">Hi</h2>
   CSS:
   .menu { color: red; }
   .menu { color: white; } (a) yellow (b) black (c) red (d) white
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     background-color: yellow;
     color: red;
     text-align: center;
     margin: 10px;
   }
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 250px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 50px wide (no margins).
5. 5.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
6. 6.🎯 Which CSS selector matches this element?
   <li class="box" id="end">Hello</li> (a) .star (b) #box (c) #hero (d) .box
7. 7.⚖️ What colour is the text of this element?
   <h2 class="big" id="intro">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: white; } (a) orange (b) blue (c) white (d) yellow
8. 8.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) text-align (d) font-size
9. 9.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
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
11. 11.Which of these does JavaScript do? (a) makes a link (b) changes the page live (c) makes headings and lists (d) adds space around boxes
12. 12.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;
13. 13.✍️ Which property is set to yellow in this rule?
    #top {
      text-align: center;
      background-color: yellow;
    } (a) yellow (b) background-color (c) margin (d) padding
14. 14.🔍 Which is the odd one out? (a) makes headings and lists (b) gives the page structure (c) lays out the page (d) puts a picture on a page
15. 15.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a form box (c) sets colours and fonts (d) makes a link
16. 16.🎯 Which element does the selector #top style? (a) <h1 id="intro"> (b) <h1 id="top"> (c) <h2 class="red"> (d) <h1 class="top">
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
      color: red;
      width: 300px;
      margin: 10px;
    }
18. 18.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
19. 19.✍️ What is the selector in this CSS rule?
    body {
      border: 2px solid;
      margin: 10px;
    } (a) border (b) body (c) .box (d) 10px
20. 20.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }
22. 22.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      background-color: yellow;
      padding: 8px;
    }
24. 24.🎯 Which element does the selector span style? (a) <p> (b) <h2 id="top"> (c) <h1 class="red"> (d) <span class="red">
25. 25.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    #hero { color: purple; }
    h1 { color: red; }
    .star { color: blue; } (a) red (b) purple (c) yellow (d) blue
26. 26.✍️ Which property is set to 10px in this rule?
    .box {
      margin: 10px;
      color: red;
      border: 2px solid;
    } (a) padding (b) font-weight (c) 10px (d) margin
27. 27.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
28. 28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: green; }
    #logo { color: red; } (a) orange (b) green (c) red (d) black
30. 30.🎯 Which element does the selector #intro style? (a) <p id="main"> (b) <p id="intro"> (c) <h1 class="note"> (d) <p class="intro">
31. 31.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
32. 32.🎯 Can many elements share the same class? (a) No (b) Yes
33. 33.True or false: p is a class selector. (a) True (b) False
34. 34.🖌️ What colour is behind the letters?
    p {
      text-align: right;
      font-size: 32px;
      color: white;
      background-color: green;
    } (a) white (b) black (c) green
35. 35.Which of these does JavaScript do? (a) adds space around boxes (b) shows a pop-up message (c) gives the page structure (d) makes headings and lists
36. 36.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
37. 37.Which of these is margin? (a) the text or picture (b) space inside the border (c) a solid or dotted edge (d) space outside the border
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
39. 39.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: orange; }
    #top { color: blue; } (a) orange (b) blue (c) yellow (d) black
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }

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