← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 849 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  2. 2.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      font-style: italic;
      border: 2px solid;
    }     (a) h1 (b) padding (c) p (d) italic
  3. 3.Which of these does CSS do? (a) reacts to a button click (b) sets colours and fonts (c) puts a picture on a page (d) makes a link
  4. 4.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
  5. 5.Which of these is the border? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) the gap to other boxes
  6. 6.What does justify-content: flex-end do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
  7. 7.🎯 Which element does the selector .red style? (a) <li class="box"> (b) <li id="red"> (c) <div class="star"> (d) <li class="red">
  8. 8.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) // (d) #
  9. 9.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
  10. 10.🌈 In #00ad00 the green part is the hex number ad. What is it as a normal number?
  11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 15px;
      border: 3px solid black;
      margin: 20px;
    }
  12. 12.What does background-color do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) sets the letter colour
  13. 13.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
  14. 14.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: red; }     (a) black (b) yellow (c) orange (d) red
  15. 15.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
  16. 16.True or false: CSS puts a picture on a page. (a) True (b) False
  17. 17.Which of these does CSS do? (a) checks a quiz answer (b) makes a link (c) adds space around boxes (d) counts down a timer
  18. 18.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
  19. 19.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    .note { color: orange; }
    h1 { color: purple; }     (a) black (b) purple (c) orange (d) red
  20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
  21. 21.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: blue; }
    #logo { color: yellow; }     (a) blue (b) white (c) yellow (d) purple
  22. 22.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) exactly 100px (d) 800px or narrower
  23. 23.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: black; }
    .note { color: blue; }     (a) purple (b) yellow (c) blue (d) black
  24. 24.🖌️ What colour are the letters?
    p {
      background-color: red;
      font-size: 24px;
      color: purple;
      text-align: left;
    }     (a) purple (b) green (c) red
  25. 25.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    .menu { color: purple; }
    .menu { color: red; }     (a) purple (b) blue (c) red (d) orange
  26. 26.🎯 What kind of selector is #top? (a) an id selector (b) a class selector (c) an element selector
  27. 27.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
  28. 28.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    .note { color: green; }
    #logo { color: white; }
    h2 { color: orange; }     (a) white (b) black (c) orange (d) green
  29. 29.✍️ Which property is set to 2px solid in this rule?
    h1 {
      background-color: yellow;
      border: 2px solid;
    }     (a) width (b) 2px solid (c) font-style (d) border
  30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
  31. 31.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) reacts to a button click (d) makes a form box
  32. 32.🔍 Which is the odd one out? (a) adds space around boxes (b) puts a picture on a page (c) lays out the page (d) sets colours and fonts
  33. 33.🎯 Which CSS selector matches this element?
    <h1 class="note" id="intro">Hello</h1>     (a) .intro (b) #note (c) h2 (d) #intro
  34. 34.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
  35. 35.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) space-between (d) center
  36. 36.🔍 Which is the odd one out? (a) sets colours and fonts (b) reacts to a button click (c) checks a quiz answer (d) shows a pop-up message
  37. 37.🖌️ Which CSS property colours behind the text? (a) color (b) font-weight (c) background-color (d) font-family
  38. 38.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 1000 (c) 100 (d) 99
  39. 39.True or false: margin is space outside the border. (a) False (b) True
  40. 40.✍️ What is the selector in this CSS rule?
    h2 {
      border: 2px solid;
      margin: 10px;
      text-align: center;
    }     (a) 10px (b) border (c) h1 (d) h2

Answer key

  1. 20
  2. h1
  3. sets colours and fonts
  4. 20
  5. a solid or dotted edge
  6. packs boxes at the end
  7. <li class="red">
  8. /*
  9. flex-start
  10. 173
  11. 256
  12. colours behind the text
  13. an id selector
  14. red
  15. blue
  16. False
  17. adds space around boxes
  18. an element selector
  19. black
  20. 224
  21. yellow
  22. 800px or wider
  23. black
  24. purple
  25. red
  26. an id selector
  27. 26
  28. white
  29. border
  30. 30
  31. reacts to a button click
  32. puts a picture on a page
  33. #intro
  34. 24
  35. space-between
  36. sets colours and fonts
  37. background-color
  38. 255
  39. True
  40. h2

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