← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 813 · 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 property is set to center in this rule?
    body {
      text-align: center;
      background-color: yellow;
    }     (a) background-color (b) center (c) margin (d) text-align
  2. 2.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
  3. 3.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }     (a) No (b) Yes
  4. 4.✍️ What is the selector in this CSS rule?
    h1 {
      margin: 10px;
      font-style: italic;
      border: 2px solid;
    }     (a) margin (b) italic (c) h1 (d) p
  5. 5.✍️ What is the selector in this CSS rule?
    h1 {
      font-weight: bold;
      padding: 8px;
      text-align: center;
    }     (a) font-weight (b) p (c) 8px (d) h1
  6. 6.Which of these does HTML do? (a) gives the page structure (b) adds space around boxes (c) reacts to a button click (d) rounds box corners
  7. 7.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-end (d) flex-start
  8. 8.🎯 What kind of selector is .note? (a) an id selector (b) an element selector (c) a class selector
  9. 9.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  10. 10.🖌️ Which CSS property colours behind the text? (a) text-align (b) color (c) background-color (d) font-size
  11. 11.🧩 Which language lays out the page? (a) CSS (b) HTML (c) JavaScript
  12. 12.🎯 Which element does the selector #top style? (a) <h1 class="top"> (b) <h1 id="top"> (c) <h1 id="intro"> (d) <h2 class="star">
  13. 13.🌈 In #000021 the blue part is the hex number 21. What is it as a normal number?
  14. 14.Which of these is margin? (a) the line round the box (b) a solid or dotted edge (c) space outside the border (d) the gap round content
  15. 15.True or false: h1 is an id selector. (a) True (b) False
  16. 16.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) fits every screen (d) is only for laptops
  17. 17.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }     (a) No (b) Yes
  18. 18.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    #hero { color: green; }
    #hero { color: purple; }     (a) blue (b) purple (c) black (d) green
  19. 19.📦 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: 2px solid black;
      margin: 10px;
    }
  20. 20.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 2 (c) 3 (d) 4
  21. 21.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) changes the text size (d) puts a picture on a page
  22. 22.✍️ What value is given to font-size in this rule?
    .box {
      font-size: 20px;
      color: red;
      font-style: italic;
      width: 300px;
    }     (a) yellow (b) center (c) font-size (d) 20px
  23. 23.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) centres a heading (d) makes the text bold
  24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  25. 25.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) reacts to a button click (d) makes a link
  26. 26.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) turned off (d) 600px or narrower
  27. 27.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: white; }
    .note { color: black; }     (a) black (b) purple (c) white (d) red
  28. 28.🖌️ What colour is behind the letters?
    li {
      color: yellow;
      text-align: left;
      font-size: 36px;
      background-color: purple;
    }     (a) purple (b) yellow (c) blue
  29. 29.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
  30. 30.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }     (a) Yes (b) No
  31. 31.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 470px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  33. 33.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
  34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }     (a) No (b) Yes
  35. 35.✍️ Which property is set to bold in this rule?
    .box {
      font-weight: bold;
      width: 300px;
    }     (a) border (b) width (c) font-weight (d) bold
  36. 36.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
  37. 37.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
  38. 38.🎯 Which element does the selector #main style? (a) <li class="main"> (b) <li id="logo"> (c) <li id="main"> (d) <div class="star">
  39. 39.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) align-items (d) display: flex
  40. 40.Which of these does HTML do? (a) makes headings and lists (b) reacts to a button click (c) changes the page live (d) adds space around boxes

Answer key

  1. text-align
  2. 800px or wider
  3. Yes
  4. h1
  5. h1
  6. gives the page structure
  7. flex-end
  8. a class selector
  9. 22
  10. background-color
  11. CSS
  12. <h1 id="top">
  13. 33
  14. space outside the border
  15. False
  16. fits every screen
  17. No
  18. purple
  19. 244
  20. 3
  21. changes the text size
  22. 20px
  23. colours behind the text
  24. 40
  25. reacts to a button click
  26. 600px or narrower
  27. black
  28. purple
  29. an id selector
  30. No
  31. 22
  32. 70
  33. { }
  34. Yes
  35. font-weight
  36. .
  37. 14
  38. <li id="main">
  39. display: flex
  40. makes headings and lists

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