← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 662 · 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.What does font-size do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
  2. 2.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 24px;
      text-align: left;
      color: white;
      background-color: blue;
    }     (a) in the middle (b) on the left (c) on the right
  3. 3.🌈 Which hex code is blue? (a) #0000ff (b) #ffff00 (c) #ffffff (d) #00ffff
  4. 4.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  5. 5.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    .red { color: red; }
    .red { color: yellow; }     (a) yellow (b) white (c) orange (d) red
  6. 6.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 25px;
      border: 4px solid black;
      margin: 15px;
    }
  7. 7.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
  8. 8.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
  9. 9.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
  10. 10.✍️ CSS declarations go inside which brackets? (a) { } (b) < > (c) ( ) (d) [ ]
  11. 11.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
  12. 12.✍️ What is the selector in this CSS rule?
    li {
      text-align: center;
      border: 2px solid;
      font-size: 20px;
      background-color: yellow;
    }     (a) li (b) body (c) 2px solid (d) text-align
  13. 13.🔍 Which is the odd one out? (a) puts a picture on a page (b) adds space around boxes (c) rounds box corners (d) sets colours and fonts
  14. 14.✍️ What value is given to font-size in this rule?
    li {
      border: 2px solid;
      padding: 8px;
      font-style: italic;
      font-size: 20px;
    }     (a) font-size (b) center (c) yellow (d) 20px
  15. 15.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-weight (c) font-size (d) background-color
  16. 16.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }     (a) Yes (b) No
  17. 17.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    p { color: purple; }
    #hero { color: black; }     (a) blue (b) black (c) orange (d) purple
  18. 18.✍️ What value is given to color in this rule?
    body {
      text-align: center;
      font-size: 20px;
      color: red;
    }     (a) 20px (b) center (c) color (d) red
  19. 19.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }     (a) No (b) Yes
  20. 20.🌈 Which hex code is red? (a) #00ff00 (b) #000000 (c) #ff00ff (d) #ff0000
  21. 21.True or false: CSS gives the page structure. (a) True (b) False
  22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
  23. 23.🎯 Which CSS selector matches this element?
    <p class="box" id="hero">Hello</p>     (a) #box (b) #top (c) .hero (d) p
  24. 24.🖌️ How big is the text, in px?
    h2 {
      background-color: blue;
      color: yellow;
      font-size: 36px;
      text-align: right;
    }
  25. 25.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) font-weight (d) color
  26. 26.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
  27. 27.Which of these does CSS do? (a) shows a pop-up message (b) checks a quiz answer (c) makes a form box (d) rounds box corners
  28. 28.✍️ What value is given to font-style in this rule?
    #top {
      font-style: italic;
      background-color: yellow;
      width: 300px;
    }     (a) font-style (b) 20px (c) italic (d) red
  29. 29.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) background-color (c) font-family (d) font-size
  30. 30.True or false: CSS shows a pop-up message. (a) False (b) True
  31. 31.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    #main { color: black; }
    #main { color: purple; }     (a) purple (b) black (c) white (d) yellow
  32. 32.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
  33. 33.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) the line round the box (d) the gap to other boxes
  34. 34.Which of these does CSS do? (a) changes the page live (b) counts down a timer (c) adds space around boxes (d) shows a pop-up message
  35. 35.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }     (a) Yes (b) No
  36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }     (a) No (b) Yes
  37. 37.True or false: #end is a class selector. (a) True (b) False
  38. 38.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }     (a) Yes (b) No
  39. 39.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    }     (a) No (b) Yes
  40. 40.✍️ What value is given to border in this rule?
    .note {
      border: 2px solid;
      padding: 8px;
    }     (a) 2px solid (b) border (c) italic (d) 300px

Answer key

  1. makes letters bigger
  2. on the left
  3. #0000ff
  4. 12
  5. yellow
  6. 348
  7. an element selector
  8. puts boxes in the middle
  9. 10
  10. { }
  11. a class selector
  12. li
  13. puts a picture on a page
  14. 20px
  15. background-color
  16. Yes
  17. black
  18. red
  19. No
  20. #ff0000
  21. False
  22. 10
  23. p
  24. 36
  25. color
  26. packs boxes at the start
  27. rounds box corners
  28. italic
  29. font-size
  30. False
  31. purple
  32. 12
  33. the text or picture
  34. adds space around boxes
  35. Yes
  36. Yes
  37. False
  38. Yes
  39. Yes
  40. 2px solid

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