CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 495 · 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.What does color do? (a) colours behind the text (b) sets the letter colour (c) picks the font style (d) centres a heading
2. 2.🎯 Which CSS selector matches this element?
   <li class="big" id="logo">Hello</li> (a) #big (b) #end (c) .big (d) div
3. 3.⚖️ What colour is the text of this element?
   <p class="box" id="intro">Hi</p>
   CSS:
   .box { color: yellow; }
   .box { color: red; } (a) green (b) red (c) yellow (d) black
4. 4.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) black (d) red
5. 5.🎯 Can many elements share the same class? (a) Yes (b) No
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 110px;
     padding: 10px;
     border: 5px solid black;
     margin: 5px;
   }
7. 7.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
8. 8.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
9. 9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
12. 12.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: blue; } (a) blue (b) black (c) yellow (d) white
13. 13.✍️ Which property is set to 20px in this rule?
    .box {
      font-weight: bold;
      width: 300px;
      font-size: 20px;
    } (a) 20px (b) font-size (c) text-align (d) background-color
14. 14.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) border (d) margin
15. 15.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) display: flex (d) justify-content
16. 16.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
18. 18.🌈 In #009b00 the green part is the hex number 9b. What is it as a normal number?
19. 19.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
20. 20.True or false: .star is an id selector. (a) False (b) True
21. 21.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: green; }
    #hero { color: red; } (a) orange (b) red (c) blue (d) green
22. 22.🎯 What kind of selector is h1? (a) a class selector (b) an id selector (c) an element selector
23. 23.What does font-size do? (a) sets the letter colour (b) picks the font style (c) centres a heading (d) makes letters bigger
24. 24.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      text-align: center;
    } (a) font-size (b) font-style (c) color (d) italic
25. 25.✍️ What is the selector in this CSS rule?
    li {
      width: 300px;
      background-color: yellow;
      margin: 10px;
      text-align: center;
    } (a) body (b) yellow (c) li (d) width
26. 26.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    .note { color: white; }
    .note { color: orange; } (a) white (b) orange (c) red (d) green
27. 27.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
28. 28.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      background-color: black;
      font-size: 28px;
      color: red;
    } (a) green (b) black (c) red
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 270px;
      padding: 5px;
      border: 4px solid black;
      margin: 10px;
    }
30. 30.🎯 Which element does the selector li style? (a) <li class="star"> (b) <p id="top"> (c) <div> (d) <span class="star">
31. 31.True or false: CSS makes a form box. (a) True (b) False
32. 32.📦 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: 15px;
      border: 1px solid black;
      margin: 15px;
    }
33. 33.Which of these is the content? (a) the gap round content (b) the text or picture (c) the line round the box (d) space inside the border
34. 34.📦 In the box model, which part is space outside the border? (a) margin (b) content (c) border (d) padding
35. 35.📦 In the box model, which part is the gap to other boxes? (a) border (b) margin (c) padding (d) content
36. 36.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) background-color (c) font-size (d) text-align
37. 37.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: black; } (a) blue (b) black (c) red (d) yellow
38. 38.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
39. 39.True or false: .menu is an element selector. (a) True (b) False
40. 40.Which of these is padding? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border

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