CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 173 · 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 kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
2. 2.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
3. 3.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
4. 4.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) sets colours and fonts (d) shows a pop-up message
5. 5.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) 600px or wider (d) turned off
6. 6.🔍 Which is the odd one out? (a) changes the page live (b) shows a pop-up message (c) rounds box corners (d) checks a quiz answer
7. 7.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) space-between (d) flex-end
8. 8.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) has no pictures (d) is only for laptops
9. 9.🎯 Which element does the selector div style? (a) <h1 id="intro"> (b) <div class="box"> (c) <p class="box"> (d) <span>
10. 10.Which of these does HTML do? (a) changes the text size (b) counts down a timer (c) makes headings and lists (d) sets colours and fonts
11. 11.🎯 Which CSS selector matches this element?
    <span class="box" id="hero">Hello</span> (a) #top (b) .hero (c) span (d) .star
12. 12.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
13. 13.🖌️ What colour are the letters?
    h2 {
      font-size: 20px;
      text-align: right;
      color: black;
      background-color: blue;
    } (a) blue (b) white (c) black
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
15. 15.Which of these is padding? (a) a solid or dotted edge (b) the line round the box (c) the gap round content (d) the gap to other boxes
16. 16.🎯 Which CSS selector matches this element?
    <h2 class="note" id="main">Hello</h2> (a) li (b) .main (c) h2 (d) #logo
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-style: italic;
      color: red;
      border: 2px solid;
      margin: 10px;
    }
18. 18.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the page live (c) changes the text size (d) lays out the page
19. 19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
20. 20.Which of these does JavaScript do? (a) gives the page structure (b) sets colours and fonts (c) makes a link (d) reacts to a button click
21. 21.🌈 In #000015 the blue part is the hex number 15. What is it as a normal number?
22. 22.True or false: the border is the line round the box. (a) True (b) False
23. 23.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) cyan (c) bright green (d) black
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      padding: 8px;
      background-color: yellow;
    }
26. 26.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    #end { color: blue; }
    #end { color: green; } (a) purple (b) red (c) blue (d) green
27. 27.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) gives the page structure (d) makes headings and lists
28. 28.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
29. 29.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    .star { color: purple; }
    p { color: white; }
    #intro { color: orange; } (a) purple (b) yellow (c) orange (d) white
30. 30.✍️ How does a CSS comment start? (a) # (b) <!-- (c) // (d) /*
31. 31.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
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: 180px;
      padding: 25px;
      border: 5px solid black;
      margin: 10px;
    }
33. 33.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    h1 { color: yellow; }
    #top { color: green; } (a) yellow (b) white (c) blue (d) green
34. 34.🎯 Which CSS selector matches this element?
    <p class="star" id="main">Hello</p> (a) #logo (b) h1 (c) .main (d) .star
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      font-size: 20px;
      background-color: yellow;
      color: red;
    }
36. 36.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
37. 37.🖌️ How big is the text, in px?
    h1 {
      background-color: red;
      font-size: 16px;
      text-align: right;
      color: purple;
    }
38. 38.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) white (d) blue
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
40. 40.Which of these is the border? (a) space outside the border (b) space inside the border (c) the line round the box (d) the text or picture

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