CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 642 · 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 a media query check? (a) the battery level (b) the page title (c) the time of day (d) the screen width
2. 2.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
3. 3.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
4. 4.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) white (c) blue (d) yellow
5. 5.⚖️ What colour is the text of this element?
   <h1 class="star" id="intro">Hi</h1>
   CSS:
   h1 { color: orange; }
   h1 { color: yellow; } (a) orange (b) white (c) blue (d) yellow
6. 6.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
7. 7.🔍 Which is the odd one out? (a) shows a pop-up message (b) adds space around boxes (c) sets colours and fonts (d) rounds box corners
8. 8.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-family (d) font-size
9. 9.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
10. 10.✍️ In color: blue; which part is the property? (a) : (b) ; (c) blue (d) color
11. 11.🧩 Which language checks a quiz answer? (a) JavaScript (b) HTML (c) CSS
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: orange; }
    p { color: white; } (a) red (b) white (c) orange (d) green
13. 13.True or false: img is a class selector. (a) True (b) False
14. 14.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) blue (c) bright green (d) red
15. 15.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
16. 16.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 540px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
20. 20.🖌️ What colour is behind the letters?
    h1 {
      font-size: 20px;
      background-color: black;
      color: red;
      text-align: right;
    } (a) red (b) purple (c) black
21. 21.🌈 Which colour of light is strongest in rgb(103, 31, 167)? (a) blue (b) green (c) red
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
23. 23.Which of these does CSS do? (a) checks a quiz answer (b) makes headings and lists (c) counts down a timer (d) lays out the page
24. 24.What does justify-content: space-between do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
25. 25.🖌️ Which CSS property makes letters bigger? (a) color (b) background-color (c) font-family (d) font-size
26. 26.✍️ Which property is set to 10px in this rule?
    h1 {
      padding: 8px;
      font-style: italic;
      margin: 10px;
    } (a) font-weight (b) margin (c) padding (d) 10px
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 30px;
      border: 3px solid black;
      margin: 20px;
    }
29. 29.Which of these does JavaScript do? (a) adds space around boxes (b) gives the page structure (c) changes the page live (d) sets colours and fonts
30. 30.What does text-align do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) centres a heading
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 30px;
      border: 1px solid black;
      margin: 10px;
    }
32. 32.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
33. 33.🌈 In #750000 the red part is the hex number 75. What is it as a normal number?
34. 34.🎯 Which element does the selector h2 style? (a) <li> (b) <h2 class="box"> (c) <span id="intro"> (d) <div class="box">
35. 35.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 3 (d) 2
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
37. 37.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
38. 38.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
39. 39.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) changes the page live (d) sets colours and fonts
40. 40.Which of these is margin? (a) space inside the border (b) the gap round content (c) space outside the border (d) the text or picture

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