CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 707 · 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 language changes the page live? (a) CSS (b) JavaScript (c) HTML
2. 2.True or false: img is an element selector. (a) True (b) False
3. 3.🌈 Which colour is #00ffff? (a) white (b) bright green (c) cyan (d) red
4. 4.🖌️ Which CSS property makes letters bigger? (a) color (b) font-size (c) text-align (d) font-family
5. 5.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
6. 6.🖌️ How big is the text, in px?
   h1 {
     color: white;
     background-color: blue;
     font-size: 24px;
     text-align: center;
   }
7. 7.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) space-between (d) flex-end
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 90px;
     padding: 25px;
     border: 4px solid black;
     margin: 20px;
   }
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 100px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 40px wide (no margins).
10. 10.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    #top { color: yellow; }
    #top { color: green; } (a) black (b) yellow (c) green (d) blue
11. 11.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
12. 12.🖌️ What colour are the letters?
    h2 {
      background-color: yellow;
      font-size: 36px;
      text-align: left;
      color: black;
    } (a) white (b) black (c) yellow
13. 13.What does justify-content: space-between 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
14. 14.🧩 Which language counts down a timer? (a) JavaScript (b) HTML (c) CSS
15. 15.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    .red { color: blue; }
    .red { color: white; } (a) white (b) red (c) black (d) blue
16. 16.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    .big { color: red; }
    h1 { color: white; } (a) red (b) white (c) purple (d) blue
17. 17.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
19. 19.✍️ What is the selector in this CSS rule?
    li {
      width: 300px;
      font-weight: bold;
      margin: 10px;
    } (a) body (b) bold (c) li (d) width
20. 20.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
21. 21.🖌️ What colour is behind the letters?
    h1 {
      font-size: 16px;
      background-color: white;
      color: red;
      text-align: left;
    } (a) red (b) green (c) white
22. 22.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    .star { color: red; }
    #logo { color: black; }
    p { color: blue; } (a) purple (b) red (c) blue (d) black
24. 24.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) margin (d) padding
25. 25.🌈 Which colour of light is strongest in rgb(37, 2, 233)? (a) blue (b) green (c) red
26. 26.🎯 Which element does the selector div style? (a) <p class="star"> (b) <span> (c) <div class="star"> (d) <h1 id="main">
27. 27.✍️ Which property is set to 2px solid in this rule?
    .note {
      font-size: 20px;
      font-weight: bold;
      border: 2px solid;
    } (a) 2px solid (b) width (c) font-style (d) border
28. 28.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) space outside the border (d) the gap round content
29. 29.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
30. 30.🌈 Which hex code is red? (a) #ff00ff (b) #00ffff (c) #0000ff (d) #ff0000
31. 31.Which of these is the border? (a) the line round the box (b) the gap round content (c) the gap to other boxes (d) space outside the border
32. 32.🎯 Which element does the selector .note style? (a) <span class="big"> (b) <span class="note"> (c) <p class="red"> (d) <span id="note">
33. 33.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    #end { color: purple; }
    #end { color: red; } (a) orange (b) black (c) purple (d) red
34. 34.Which of these does CSS do? (a) shows a pop-up message (b) makes a link (c) makes a form box (d) lays out the page
35. 35.🔍 Which is the odd one out? (a) reacts to a button click (b) makes a link (c) gives the page structure (d) puts a picture on a page
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
37. 37.🌈 Which colour of light is strongest in rgb(109, 219, 9)? (a) blue (b) green (c) red
38. 38.True or false: HTML counts down a timer. (a) False (b) True
39. 39.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one

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