← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 424 · 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.🖌️ How big is the text, in px?
    h2 {
      font-size: 12px;
      text-align: left;
      color: orange;
      background-color: green;
    }
  2. 2.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  3. 3.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }     (a) No (b) Yes
  4. 4.What does background-color do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
  5. 5.🔍 Which is the odd one out? (a) gives the page structure (b) lays out the page (c) sets colours and fonts (d) changes the text size
  6. 6.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 10px;
      border: 2px solid black;
      margin: 15px;
    }
  7. 7.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: orange; }
    p { color: blue; }     (a) white (b) orange (c) yellow (d) blue
  8. 8.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p>     (a) .top (b) #intro (c) #top (d) .red
  9. 9.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: white; }
    p { color: orange; }     (a) yellow (b) orange (c) red (d) white
  10. 10.🖌️ How big is the text, in px?
    h2 {
      text-align: left;
      background-color: blue;
      font-size: 12px;
      color: white;
    }
  11. 11.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
  12. 12.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
  13. 13.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      color: yellow;
      background-color: green;
      font-size: 40px;
    }     (a) green (b) yellow (c) orange
  14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      margin: 10px;
    }     (a) font-style (b) h1 (c) 10px (d) h2
  15. 15.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
  16. 16.🌈 Which colour of light is strongest in rgb(42, 210, 14)? (a) red (b) green (c) blue
  17. 17.🔍 Which is the odd one out? (a) changes the text size (b) makes a form box (c) makes headings and lists (d) gives the page structure
  18. 18.🧩 Which language changes the page live? (a) CSS (b) JavaScript (c) HTML
  19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
    }
  20. 20.🎯 Which element does the selector #end style? (a) <p class="end"> (b) <p id="hero"> (c) <p id="end"> (d) <h1 class="menu">
  21. 21.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      margin: 10px;
      font-size: 20px;
    }     (a) body (b) 10px (c) font-weight (d) li
  22. 22.🔍 Which is the odd one out? (a) makes headings and lists (b) reacts to a button click (c) puts a picture on a page (d) gives the page structure
  23. 23.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-size (c) color (d) font-family
  24. 24.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
  25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  26. 26.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    h1 { color: blue; }
    .box { color: red; }     (a) green (b) blue (c) white (d) red
  27. 27.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: red; }
    #top { color: blue; }     (a) blue (b) red (c) orange (d) yellow
  28. 28.🎯 Which CSS selector matches this element?
    <h2 class="red" id="main">Hello</h2>     (a) .box (b) #red (c) li (d) h2
  29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 290px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
  30. 30.🌈 Which colour is rgb(0, 255, 0)? (a) magenta (b) yellow (c) cyan (d) bright green
  31. 31.🎯 Which element does the selector .red style? (a) <div class="box"> (b) <span class="star"> (c) <div id="red"> (d) <div class="red">
  32. 32.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
  33. 33.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
  34. 34.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
  35. 35.✍️ What value is given to padding in this rule?
    h2 {
      font-weight: bold;
      border: 2px solid;
      padding: 8px;
    }     (a) padding (b) 2px solid (c) bold (d) 8px
  36. 36.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    }     (a) No (b) Yes
  37. 37.Which of these does JavaScript do? (a) makes a form box (b) puts a picture on a page (c) lays out the page (d) reacts to a button click
  38. 38.🌈 Which colour of light is strongest in rgb(246, 56, 11)? (a) red (b) blue (c) green
  39. 39.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
  40. 40.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    h2 { color: white; }
    .note { color: green; }     (a) white (b) black (c) blue (d) green

Answer key

  1. 12
  2. 22
  3. No
  4. colours behind the text
  5. gives the page structure
  6. 284
  7. blue
  8. #top
  9. orange
  10. 12
  11. an element selector
  12. display: flex
  13. yellow
  14. h2
  15. red
  16. green
  17. changes the text size
  18. JavaScript
  19. 1
  20. <p id="end">
  21. li
  22. reacts to a button click
  23. font-family
  24. { }
  25. 70
  26. white
  27. blue
  28. h2
  29. 50
  30. bright green
  31. <div class="red">
  32. 24
  33. 16
  34. the later one
  35. 8px
  36. No
  37. reacts to a button click
  38. red
  39. 20
  40. green

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