← CSS test lesson New set →

CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 152 · 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.What does font-family do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) picks the font style
  2. 2.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) no pages (d) many pages
  3. 3.Which of these is the content? (a) the text or picture (b) the gap to other boxes (c) space inside the border (d) the line round the box
  4. 4.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: red; }     (a) red (b) green (c) yellow (d) white
  5. 5.💪 Which flexbox property lines boxes up across? (a) align-items (b) display: flex (c) gap (d) flex-direction
  6. 6.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }     (a) No (b) Yes
  7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
  8. 8.✍️ What value is given to width in this rule?
    h1 {
      font-size: 20px;
      width: 300px;
      font-weight: bold;
      padding: 8px;
    }     (a) 300px (b) width (c) italic (d) red
  9. 9.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-family (c) color (d) font-weight
  10. 10.🖌️ Which CSS property centres a heading? (a) color (b) text-align (c) font-weight (d) font-family
  11. 11.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
  12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
  13. 13.🎯 Can many elements share the same class? (a) Yes (b) No
  14. 14.✍️ How does a CSS comment start? (a) # (b) /* (c) // (d) <!--
  15. 15.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
  16. 16.✍️ What is the selector in this CSS rule?
    p {
      width: 300px;
      border: 2px solid;
      margin: 10px;
      text-align: center;
    }     (a) .note (b) 2px solid (c) p (d) width
  17. 17.True or false: the content is the text or picture. (a) False (b) True
  18. 18.🔍 Which is the odd one out? (a) adds space around boxes (b) counts down a timer (c) reacts to a button click (d) shows a pop-up message
  19. 19.Which of these does JavaScript do? (a) puts a picture on a page (b) makes a link (c) changes the page live (d) makes a form box
  20. 20.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Cascading Style Sheets (d) Colourful Site Styles
  21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }     (a) Yes (b) No
  22. 22.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    #intro { color: green; }
    h2 { color: orange; }
    .menu { color: blue; }     (a) blue (b) green (c) orange (d) white
  23. 23.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    .menu { color: blue; }
    h1 { color: yellow; }
    #end { color: red; }     (a) green (b) yellow (c) red (d) blue
  24. 24.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }
  25. 25.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) counts down a timer (d) makes a link
  26. 26.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
  27. 27.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    #top { color: purple; }
    #top { color: orange; }     (a) purple (b) orange (c) blue (d) yellow
  28. 28.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) - (d) :
  29. 29.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) gap (d) display: flex
  30. 30.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <css> (d) <body>
  31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  32. 32.✍️ Which property is set to 300px in this rule?
    .box {
      width: 300px;
      background-color: yellow;
    }     (a) font-style (b) width (c) color (d) 300px
  33. 33.✍️ Which property is set to italic in this rule?
    #top {
      font-style: italic;
      width: 300px;
    }     (a) font-size (b) color (c) font-style (d) italic
  34. 34.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-size (d) text-align
  35. 35.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }     (a) Yes (b) No
  36. 36.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      padding: 8px;
      margin: 10px;
      font-size: 20px;
    }     (a) body (b) color (c) li (d) 8px
  37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  38. 38.🧩 Which language changes the text size? (a) JavaScript (b) HTML (c) CSS
  39. 39.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }     (a) Yes (b) No
  40. 40.🔍 Which is the odd one out? (a) reacts to a button click (b) gives the page structure (c) shows a pop-up message (d) checks a quiz answer

Answer key

  1. picks the font style
  2. many pages
  3. the text or picture
  4. red
  5. align-items
  6. No
  7. 362
  8. 300px
  9. font-weight
  10. text-align
  11. the viewport meta tag
  12. 224
  13. Yes
  14. /*
  15. the screen width
  16. p
  17. True
  18. adds space around boxes
  19. changes the page live
  20. Cascading Style Sheets
  21. Yes
  22. green
  23. red
  24. 12
  25. makes a link
  26. equal gaps, none at ends
  27. orange
  28. :
  29. flex-direction
  30. <style>
  31. 10
  32. width
  33. font-style
  34. color
  35. Yes
  36. li
  37. 70
  38. CSS
  39. Yes
  40. gives the page structure

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