CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 362 · 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 does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
2. 2.True or false: #end is an id selector. (a) True (b) False
3. 3.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <style> (d) <css>
4. 4.🎯 Which CSS selector matches this element?
   <span class="note" id="main">Hello</span> (a) span (b) #note (c) p (d) .main
5. 5.✍️ In color: blue; which part is the property? (a) color (b) blue (c) : (d) ;
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   .red { color: white; }
   .red { color: black; } (a) blue (b) white (c) yellow (d) black
7. 7.✍️ In color: blue; which part is the value? (a) ; (b) : (c) color (d) blue
8. 8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
9. 9.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 8px;
     }
   }
10. 10.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      width: 300px;
    } (a) 300px (b) #top (c) li (d) font-weight
11. 11.🎯 Which sign starts a class selector? (a) & (b) @ (c) # (d) .
12. 12.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    .menu { color: orange; }
    .menu { color: purple; } (a) yellow (b) black (c) purple (d) orange
13. 13.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      color: purple;
      text-align: left;
      background-color: orange;
    } (a) purple (b) white (c) orange
14. 14.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) content (d) border
15. 15.💪 Which flexbox property sets space between boxes? (a) align-items (b) justify-content (c) display: flex (d) gap
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 30px;
      border: 5px solid black;
      margin: 20px;
    }
17. 17.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
18. 18.What does font-weight do? (a) makes letters bigger (b) colours behind the text (c) picks the font style (d) makes the text bold
19. 19.True or false: p is an element selector. (a) False (b) True
20. 20.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) flex-end (d) center
21. 21.✍️ What value is given to width in this rule?
    .note {
      text-align: center;
      border: 2px solid;
      width: 300px;
      margin: 10px;
    } (a) red (b) width (c) 300px (d) italic
22. 22.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 60px wide (no margins).
24. 24.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) flex-start (d) space-between
25. 25.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) the line round the box (d) the gap round content
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
28. 28.🖌️ What colour is behind the letters?
    h1 {
      background-color: green;
      font-size: 36px;
      color: purple;
      text-align: left;
    } (a) green (b) purple (c) black
29. 29.True or false: CSS reacts to a button click. (a) False (b) True
30. 30.🎯 What kind of selector is #logo? (a) an element selector (b) an id selector (c) a class selector
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
32. 32.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
33. 33.True or false: the border is the gap round content. (a) True (b) False
34. 34.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) .star (b) #intro (c) .menu (d) h1
35. 35.🌈 Which hex code is blue? (a) #ff00ff (b) #ffff00 (c) #ff0000 (d) #0000ff
36. 36.🎯 Which element does the selector .menu style? (a) <p id="menu"> (b) <p class="menu"> (c) <h1 class="big"> (d) <p class="note">
37. 37.🌈 Which colour is #0000ff? (a) yellow (b) blue (c) bright green (d) cyan
38. 38.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }
39. 39.Which of these does HTML do? (a) changes the text size (b) makes headings and lists (c) lays out the page (d) sets colours and fonts
40. 40.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }

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