CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 366 · 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 is the odd one out? (a) puts a picture on a page (b) makes a link (c) changes the text size (d) makes headings and lists
2. 2.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
3. 3.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
4. 4.✍️ Which sign goes between a property and its value? (a) = (b) : (c) ; (d) -
5. 5.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
6. 6.Which of these is the border? (a) the text or picture (b) the gap round content (c) space inside the border (d) the line round the box
7. 7.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
8. 8.⚖️ What colour is the text of this element?
   <h2 class="star" id="intro">Hi</h2>
   CSS:
   #intro { color: purple; }
   #intro { color: orange; } (a) orange (b) purple (c) yellow (d) green
9. 9.🔍 Which is the odd one out? (a) lays out the page (b) makes a link (c) makes headings and lists (d) gives the page structure
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
11. 11.Which of these does HTML do? (a) checks a quiz answer (b) gives the page structure (c) changes the page live (d) counts down a timer
12. 12.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
13. 13.✍️ What value is given to background-color in this rule?
    #top {
      margin: 10px;
      width: 300px;
      background-color: yellow;
    } (a) background-color (b) 10px (c) yellow (d) 8px
14. 14.💪 Which flexbox property lines boxes up across? (a) display: flex (b) align-items (c) justify-content (d) flex-direction
15. 15.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
16. 16.🎯 Which CSS selector matches this element?
    <h1 class="big" id="hero">Hello</h1> (a) #hero (b) .hero (c) #big (d) .red
17. 17.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 470px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
19. 19.🌈 Which hex code is red? (a) #00ff00 (b) #00ffff (c) #0000ff (d) #ff0000
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
21. 21.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 3 (d) 4
22. 22.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
23. 23.📱 What does a media query check? (a) the screen width (b) the time of day (c) the battery level (d) the page title
24. 24.📦 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: 10px;
      border: 3px solid black;
      margin: 15px;
    }
25. 25.True or false: the content is the text or picture. (a) True (b) False
26. 26.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: blue; } (a) green (b) orange (c) white (d) blue
27. 27.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
28. 28.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <style> (d) <script>
29. 29.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a link (c) makes headings and lists (d) adds space around boxes
30. 30.What does font-size do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-weight: bold;
    }
32. 32.🖌️ How big is the text, in px?
    p {
      color: black;
      font-size: 20px;
      background-color: yellow;
      text-align: center;
    }
33. 33.🖌️ What colour are the letters?
    li {
      background-color: blue;
      text-align: center;
      font-size: 36px;
      color: orange;
    } (a) yellow (b) orange (c) blue
34. 34.🎯 Which CSS selector matches this element?
    <p class="note" id="top">Hello</p> (a) #note (b) .note (c) h1 (d) .top
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
36. 36.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) flex-direction (d) display: flex
37. 37.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    #top { color: yellow; }
    #top { color: black; } (a) purple (b) yellow (c) red (d) black
38. 38.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="note"> (c) <h1 class="note"> (d) <div id="end">
39. 39.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    #hero { color: purple; } (a) white (b) orange (c) black (d) purple
40. 40.💪 Which flexbox property picks row or column? (a) display: flex (b) flex-direction (c) gap (d) justify-content

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