← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 93 · 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.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
  2. 2.Which of these is the border? (a) space outside the border (b) the gap to other boxes (c) the line round the box (d) space inside the border
  3. 3.✍️ Which property is set to 2px solid in this rule?
    .note {
      border: 2px solid;
      padding: 8px;
    }     (a) 2px solid (b) width (c) font-style (d) border
  4. 4.What does justify-content: flex-end do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
  5. 5.🖌️ What colour is behind the letters?
    h2 {
      text-align: left;
      font-size: 20px;
      color: red;
      background-color: orange;
    }     (a) green (b) orange (c) red
  6. 6.🎯 Which CSS selector matches this element?
    <h1 class="box" id="intro">Hello</h1>     (a) .star (b) #intro (c) h2 (d) #main
  7. 7.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: black; }     (a) black (b) green (c) purple (d) red
  8. 8.True or false: .star is a class selector. (a) False (b) True
  9. 9.🌈 Which colour of light is strongest in rgb(97, 255, 41)? (a) blue (b) red (c) green
  10. 10.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    #logo { color: green; }
    #logo { color: white; }     (a) purple (b) white (c) red (d) green
  11. 11.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    #intro { color: yellow; }
    .big { color: white; }
    p { color: black; }     (a) yellow (b) blue (c) black (d) white
  12. 12.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
  13. 13.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    .star { color: green; }
    .star { color: blue; }     (a) red (b) purple (c) green (d) blue
  14. 14.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      margin: 10px;
    }     (a) li (b) body (c) 10px (d) font-style
  15. 15.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    #intro { color: green; }
    #intro { color: black; }     (a) green (b) orange (c) purple (d) black
  16. 16.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
  17. 17.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
  18. 18.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: purple; }     (a) green (b) purple (c) yellow (d) red
  19. 19.True or false: #logo is a class selector. (a) False (b) True
  20. 20.✍️ What is the selector in this CSS rule?
    .note {
      color: red;
      font-size: 20px;
    }     (a) color (b) #top (c) 20px (d) .note
  21. 21.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) center (d) flex-end
  22. 22.🖌️ What colour are the letters?
    p {
      background-color: red;
      text-align: left;
      color: yellow;
      font-size: 12px;
    }     (a) orange (b) yellow (c) red
  23. 23.🖌️ What colour is behind the letters?
    h2 {
      background-color: green;
      color: blue;
      font-size: 24px;
      text-align: left;
    }     (a) purple (b) green (c) blue
  24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
      border: 2px solid;
    }
  25. 25.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 190px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
  26. 26.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) red (c) black (d) bright green
  27. 27.🌈 In #2a0000 the red part is the hex number 2a. What is it as a normal number?
  28. 28.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
  29. 29.✍️ What value is given to color in this rule?
    .note {
      color: red;
      font-size: 20px;
    }     (a) color (b) center (c) 20px (d) red
  30. 30.Which of these does JavaScript do? (a) rounds box corners (b) shows a pop-up message (c) adds space around boxes (d) makes a form box
  31. 31.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
  32. 32.🎯 Which element does the selector #top style? (a) <span class="big"> (b) <div class="top"> (c) <div id="top"> (d) <div id="intro">
  33. 33.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
  34. 34.What does justify-content: center 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
  35. 35.🧩 Which language checks a quiz answer? (a) CSS (b) HTML (c) JavaScript
  36. 36.✍️ What is the selector in this CSS rule?
    p {
      text-align: center;
      color: red;
    }     (a) red (b) .note (c) text-align (d) p
  37. 37.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
  38. 38.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    #intro { color: blue; }
    .red { color: white; }     (a) green (b) blue (c) yellow (d) white
  39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }     (a) No (b) Yes
  40. 40.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: red; }
    .note { color: orange; }     (a) red (b) orange (c) blue (d) black

Answer key

  1. align-items
  2. the line round the box
  3. border
  4. packs boxes at the end
  5. orange
  6. #intro
  7. black
  8. True
  9. green
  10. white
  11. yellow
  12. blue
  13. blue
  14. li
  15. black
  16. the screen width
  17. 158
  18. purple
  19. False
  20. .note
  21. flex-end
  22. yellow
  23. green
  24. 2
  25. 250
  26. red
  27. 42
  28. equal gaps, none at ends
  29. red
  30. shows a pop-up message
  31. CSS
  32. <div id="top">
  33. 14
  34. puts boxes in the middle
  35. JavaScript
  36. p
  37. 10
  38. blue
  39. No
  40. orange

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