CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 537 · 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 empty space (px) is before the first box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
2. 2.✍️ What is the selector in this CSS rule?
   #top {
     text-align: center;
     font-style: italic;
   } (a) italic (b) text-align (c) #top (d) li
3. 3.⚖️ What colour is the text of this element?
   <h1 class="box" id="hero">Hi</h1>
   CSS:
   .box { color: orange; }
   .box { color: purple; } (a) purple (b) green (c) yellow (d) orange
4. 4.🌈 Which colour of light is strongest in rgb(38, 75, 214)? (a) green (b) red (c) blue
5. 5.📦 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: 20px;
     border: 4px solid black;
     margin: 5px;
   }
6. 6.True or false: JavaScript shows a pop-up message. (a) True (b) False
7. 7.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) : (d) ,
8. 8.What does justify-content: flex-end 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
9. 9.⚖️ What colour is the text of this element?
   <h2 class="star" id="hero">Hi</h2>
   CSS:
   #hero { color: purple; }
   .star { color: orange; }
   h2 { color: green; } (a) purple (b) yellow (c) green (d) orange
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }
11. 11.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
12. 12.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
13. 13.🖌️ What colour are the letters?
    p {
      text-align: left;
      color: orange;
      font-size: 32px;
      background-color: purple;
    } (a) white (b) orange (c) purple
14. 14.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) color (d) font-size
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      background-color: yellow;
      margin: 10px;
    }
16. 16.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    #intro { color: green; }
    #intro { color: purple; } (a) black (b) yellow (c) purple (d) green
17. 17.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    #intro { color: white; }
    #intro { color: red; } (a) red (b) orange (c) blue (d) white
18. 18.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) turned off (d) 800px or wider
19. 19.🌈 Which colour of light is strongest in rgb(28, 74, 159)? (a) blue (b) green (c) red
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
      color: red;
      text-align: center;
      border: 2px solid;
    }
21. 21.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 30px;
      }
    }
22. 22.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
23. 23.🎯 Which CSS selector matches this element?
    <span class="star" id="intro">Hello</span> (a) #intro (b) .menu (c) p (d) #main
24. 24.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
26. 26.🎯 Which element does the selector .big style? (a) <li class="box"> (b) <h2 class="big"> (c) <h2 class="red"> (d) <h2 id="big">
27. 27.What does font-size do? (a) centres a heading (b) picks the font style (c) makes letters bigger (d) makes the text bold
28. 28.✍️ What value is given to margin in this rule?
    #top {
      background-color: yellow;
      margin: 10px;
    } (a) margin (b) bold (c) 10px (d) 8px
29. 29.🌈 In #680000 the red part is the hex number 68. What is it as a normal number?
30. 30.🖌️ What colour is behind the letters?
    h1 {
      font-size: 12px;
      text-align: center;
      color: yellow;
      background-color: red;
    } (a) red (b) black (c) yellow
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      color: red;
      font-size: 20px;
      text-align: center;
    }
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      border: 2px solid;
      font-weight: bold;
    }
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
35. 35.🌈 In #001a00 the green part is the hex number 1a. What is it as a normal number?
36. 36.Which of these is the content? (a) space outside the border (b) the gap round content (c) the text or picture (d) the line round the box
37. 37.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
38. 38.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    .note { color: blue; }
    p { color: yellow; } (a) yellow (b) orange (c) red (d) blue
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 25px;
      border: 3px solid black;
      margin: 15px;
    }
40. 40.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }

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