← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 833 · 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 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }     (a) No (b) Yes
  2. 2.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
  3. 3.Which of these is padding? (a) space inside the border (b) the line round the box (c) a solid or dotted edge (d) the gap to other boxes
  4. 4.✍️ Which property is set to yellow in this rule?
    li {
      font-size: 20px;
      background-color: yellow;
      text-align: center;
      padding: 8px;
    }     (a) yellow (b) background-color (c) margin (d) padding
  5. 5.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 20px;
      border: 3px solid black;
      margin: 5px;
    }
  6. 6.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }     (a) Yes (b) No
  7. 7.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  8. 8.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    .star { color: red; }
    .star { color: orange; }     (a) yellow (b) blue (c) orange (d) red
  9. 9.🔍 Which is the odd one out? (a) reacts to a button click (b) changes the page live (c) gives the page structure (d) shows a pop-up message
  10. 10.🧩 Which language makes a form box? (a) HTML (b) JavaScript (c) CSS
  11. 11.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) color (d) font-weight
  12. 12.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) align-items (c) display: flex (d) gap
  13. 13.🖌️ Where does the text sit on its line?
    li {
      font-size: 36px;
      color: blue;
      background-color: black;
      text-align: center;
    }     (a) on the left (b) in the middle (c) on the right
  14. 14.🔍 Which is the odd one out? (a) makes a link (b) lays out the page (c) makes headings and lists (d) makes a form box
  15. 15.True or false: .note is a class selector. (a) True (b) False
  16. 16.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 3 (d) 4
  17. 17.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
  18. 18.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
  19. 19.✍️ Which property is set to yellow in this rule?
    li {
      width: 300px;
      text-align: center;
      background-color: yellow;
      font-size: 20px;
    }     (a) background-color (b) margin (c) padding (d) yellow
  20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  21. 21.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    #end { color: red; }
    p { color: purple; }     (a) orange (b) red (c) purple (d) yellow
  22. 22.Which of these does JavaScript do? (a) rounds box corners (b) makes a form box (c) adds space around boxes (d) shows a pop-up message
  23. 23.🌈 Which colour of light is strongest in rgb(106, 70, 218)? (a) green (b) red (c) blue
  24. 24.✍️ Which property is set to 2px solid in this rule?
    #top {
      text-align: center;
      width: 300px;
      padding: 8px;
      border: 2px solid;
    }     (a) width (b) 2px solid (c) font-style (d) border
  25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  26. 26.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) turned off (d) exactly 1000px
  27. 27.🌈 Which colour of light is strongest in rgb(126, 243, 35)? (a) blue (b) red (c) green
  28. 28.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) a solid or dotted edge (d) space inside the border
  29. 29.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
  30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      font-weight: bold;
      font-size: 20px;
    }
  31. 31.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: red; }     (a) blue (b) black (c) yellow (d) red
  32. 32.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    .note { color: red; }
    #logo { color: green; }
    h1 { color: black; }     (a) blue (b) green (c) red (d) black
  33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 15px;
      border: 5px solid black;
      margin: 20px;
    }
  34. 34.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) magenta (c) white (d) red
  35. 35.🖌️ Where does the text sit on its line?
    h2 {
      background-color: green;
      font-size: 24px;
      text-align: right;
      color: orange;
    }     (a) on the right (b) on the left (c) in the middle
  36. 36.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
  37. 37.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
  38. 38.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    #end { color: green; }
    #end { color: blue; }     (a) green (b) black (c) blue (d) red
  39. 39.🎨 Which tag connects an outside CSS file? (a) <link> (b) <a> (c) <css> (d) <img>
  40. 40.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) display: flex (d) gap

Answer key

  1. Yes
  2. Cascading Style Sheets
  3. space inside the border
  4. background-color
  5. 216
  6. No
  7. 12
  8. orange
  9. gives the page structure
  10. HTML
  11. background-color
  12. justify-content
  13. in the middle
  14. lays out the page
  15. True
  16. 3
  17. 12
  18. HTML
  19. background-color
  20. 22
  21. red
  22. shows a pop-up message
  23. blue
  24. border
  25. 60
  26. 600px or narrower
  27. green
  28. the gap to other boxes
  29. the later one
  30. 3
  31. red
  32. green
  33. 330
  34. yellow
  35. on the right
  36. blue
  37. /*
  38. blue
  39. <link>
  40. gap

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