CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 933 · 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.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) black (d) green
2. 2.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
3. 3.🌈 Which colour is #00ffff? (a) red (b) bright green (c) white (d) cyan
4. 4.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
5. 5.🖌️ What colour are the letters?
   h1 {
     text-align: left;
     font-size: 32px;
     color: red;
     background-color: blue;
   } (a) blue (b) red (c) orange
6. 6.🔍 Which is the odd one out? (a) sets colours and fonts (b) changes the text size (c) counts down a timer (d) rounds box corners
7. 7.🖌️ What colour is behind the letters?
   li {
     font-size: 24px;
     color: white;
     text-align: left;
     background-color: yellow;
   } (a) yellow (b) black (c) white
8. 8.🧩 Which language reacts to a button click? (a) JavaScript (b) HTML (c) CSS
9. 9.✍️ How does a CSS comment start? (a) /* (b) # (c) <!-- (d) //
10. 10.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }
11. 11.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) border (d) content
12. 12.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
13. 13.Which of these does JavaScript do? (a) adds space around boxes (b) makes a form box (c) changes the page live (d) puts a picture on a page
14. 14.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
15. 15.🖌️ What colour are the letters?
    p {
      text-align: right;
      font-size: 12px;
      color: white;
      background-color: black;
    } (a) black (b) yellow (c) white
16. 16.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-size: 20px;
      font-weight: bold;
    }
18. 18.Which of these does CSS do? (a) checks a quiz answer (b) adds space around boxes (c) makes a form box (d) shows a pop-up message
19. 19.💪 Which flexbox property lines boxes up across? (a) justify-content (b) align-items (c) flex-direction (d) display: flex
20. 20.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    #main { color: green; }
    #main { color: black; } (a) black (b) green (c) blue (d) white
21. 21.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) makes letters bigger
22. 22.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
23. 23.Which of these is the border? (a) space inside the border (b) space outside the border (c) the gap round content (d) the line round the box
24. 24.🖌️ Which CSS property colours behind the text? (a) font-weight (b) color (c) font-size (d) background-color
25. 25.True or false: margin is space inside the border. (a) True (b) False
26. 26.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
27. 27.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
28. 28.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }
29. 29.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
30. 30.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: orange; } (a) white (b) yellow (c) red (d) orange
31. 31.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
32. 32.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
33. 33.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 390px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
35. 35.Which of these does JavaScript do? (a) puts a picture on a page (b) gives the page structure (c) lays out the page (d) counts down a timer
36. 36.✍️ Which sign goes between a property and its value? (a) : (b) = (c) ; (d) -
37. 37.🌈 Which colour of light is strongest in rgb(192, 48, 52)? (a) red (b) green (c) blue
38. 38.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
39. 39.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: orange; } (a) orange (b) yellow (c) blue (d) black
40. 40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }

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