← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 914 · 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.🎯 Can many elements share the same class? (a) No (b) Yes
  2. 2.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  3. 3.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }     (a) No (b) Yes
  4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
  5. 5.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    #top { color: red; }
    .red { color: blue; }     (a) white (b) blue (c) purple (d) red
  6. 6.✍️ What is the selector in this CSS rule?
    p {
      margin: 10px;
      font-size: 20px;
    }     (a) 20px (b) .note (c) margin (d) p
  7. 7.🖌️ What colour is behind the letters?
    h1 {
      color: blue;
      text-align: center;
      font-size: 40px;
      background-color: orange;
    }     (a) purple (b) blue (c) orange
  8. 8.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
  9. 9.What does color do? (a) makes letters bigger (b) centres a heading (c) colours behind the text (d) sets the letter colour
  10. 10.✍️ What value is given to padding in this rule?
    h1 {
      border: 2px solid;
      background-color: yellow;
      font-weight: bold;
      padding: 8px;
    }     (a) 8px (b) bold (c) padding (d) 2px solid
  11. 11.🖌️ How big is the text, in px?
    p {
      text-align: center;
      background-color: purple;
      color: black;
      font-size: 16px;
    }
  12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
  13. 13.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
  14. 14.🎯 Which element does the selector div style? (a) <h1 id="main"> (b) <p class="menu"> (c) <span> (d) <div class="menu">
  15. 15.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
  16. 16.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
  17. 17.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) flex-end (d) center
  18. 18.🖌️ What colour is behind the letters?
    li {
      color: black;
      font-size: 16px;
      text-align: right;
      background-color: red;
    }     (a) black (b) yellow (c) red
  19. 19.🎯 Which sign starts a class selector? (a) # (b) . (c) & (d) @
  20. 20.✍️ What value is given to font-style in this rule?
    .box {
      border: 2px solid;
      color: red;
      font-style: italic;
      font-weight: bold;
    }     (a) 20px (b) font-style (c) italic (d) red
  21. 21.Which of these is margin? (a) the line round the box (b) a solid or dotted edge (c) the gap to other boxes (d) the text or picture
  22. 22.🌈 Which hex code is magenta? (a) #00ff00 (b) #ff00ff (c) #ffffff (d) #000000
  23. 23.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
  24. 24.🌈 Which hex code is blue? (a) #ff00ff (b) #ffffff (c) #0000ff (d) #00ffff
  25. 25.✍️ What is the selector in this CSS rule?
    p {
      font-style: italic;
      width: 300px;
      font-weight: bold;
      border: 2px solid;
    }     (a) .note (b) 300px (c) font-style (d) p
  26. 26.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .png (d) .css
  27. 27.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: yellow; }
    #top { color: red; }     (a) red (b) blue (c) white (d) yellow
  28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  29. 29.🌈 In #0000c3 the blue part is the hex number c3. What is it as a normal number?
  30. 30.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: black; }     (a) blue (b) black (c) red (d) green
  31. 31.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    h1 { color: blue; }
    .big { color: orange; }     (a) green (b) orange (c) black (d) blue
  32. 32.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) background-color (d) font-family
  33. 33.✍️ Which property is set to bold in this rule?
    li {
      padding: 8px;
      font-weight: bold;
    }     (a) bold (b) width (c) border (d) font-weight
  34. 34.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  35. 35.🎯 What kind of selector is #top? (a) a class selector (b) an id selector (c) an element selector
  36. 36.True or false: JavaScript sets colours and fonts. (a) False (b) True
  37. 37.✍️ Which property is set to 2px solid in this rule?
    h2 {
      border: 2px solid;
      width: 300px;
      background-color: yellow;
      font-weight: bold;
    }     (a) font-style (b) width (c) border (d) 2px solid
  38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
  39. 39.🔍 Which is the odd one out? (a) counts down a timer (b) sets colours and fonts (c) changes the page live (d) reacts to a button click
  40. 40.✍️ Which property is set to 20px in this rule?
    h2 {
      font-size: 20px;
      font-style: italic;
    }     (a) 20px (b) text-align (c) background-color (d) font-size

Answer key

  1. Yes
  2. 10
  3. No
  4. the later one
  5. red
  6. p
  7. orange
  8. the viewport meta tag
  9. sets the letter colour
  10. 8px
  11. 16
  12. 70
  13. packs boxes at the end
  14. <div class="menu">
  15. 600px or narrower
  16. the screen width
  17. center
  18. red
  19. .
  20. italic
  21. the gap to other boxes
  22. #ff00ff
  23. an element selector
  24. #0000ff
  25. p
  26. .css
  27. red
  28. 80
  29. 195
  30. black
  31. orange
  32. font-size
  33. font-weight
  34. 20
  35. an id selector
  36. False
  37. border
  38. 152
  39. sets colours and fonts
  40. font-size

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