CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 842 · 40 questions

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.

1. 1.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
2. 2.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .html (d) .js
3. 3.📦 In the box model, which part is space inside the border? (a) border (b) padding (c) margin (d) content
4. 4.✍️ How does a CSS comment start? (a) # (b) /* (c) // (d) <!--
5. 5.⚖️ What colour is the text of this element?
   <h1 class="note" id="hero">Hi</h1>
   CSS:
   .note { color: white; }
   #hero { color: yellow; } (a) white (b) yellow (c) purple (d) orange
6. 6.What does background-color do? (a) colours behind the text (b) makes letters bigger (c) makes the text bold (d) centres a heading
7. 7.🖌️ What colour is behind the letters?
   li {
     color: yellow;
     font-size: 12px;
     text-align: center;
     background-color: orange;
   } (a) orange (b) yellow (c) blue
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     font-size: 20px;
     color: red;
   }
9. 9.🎯 Which element does the selector #hero style? (a) <div class="hero"> (b) <div id="top"> (c) <div id="hero"> (d) <span class="menu">
10. 10.🔍 Which is the odd one out? (a) shows a pop-up message (b) reacts to a button click (c) changes the page live (d) makes a link
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
      width: 300px;
      padding: 8px;
    }
12. 12.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
13. 13.Which of these is the border? (a) the gap to other boxes (b) the gap round content (c) space outside the border (d) the line round the box
14. 14.🌈 In #910000 the red part is the hex number 91. What is it as a normal number?
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 10px;
      border: 3px solid black;
      margin: 10px;
    }
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 390px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
17. 17.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
18. 18.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
19. 19.📦 In the box model, which part is the text or picture? (a) content (b) border (c) padding (d) margin
20. 20.✍️ Which property is set to 8px in this rule?
    li {
      padding: 8px;
      font-style: italic;
    } (a) 8px (b) border (c) padding (d) font-weight
21. 21.✍️ Which sign ends each CSS declaration? (a) ; (b) : (c) , (d) .
22. 22.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
23. 23.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 230px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
24. 24.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
25. 25.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    p { color: white; }
    p { color: orange; } (a) orange (b) white (c) purple (d) yellow
26. 26.🖌️ Where does the text sit on its line?
    li {
      background-color: white;
      color: green;
      text-align: left;
      font-size: 16px;
    } (a) on the right (b) on the left (c) in the middle
27. 27.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Cascading Style Sheets (d) Computer Style Sheets
28. 28.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
29. 29.✍️ What is the selector in this CSS rule?
    .note {
      width: 300px;
      border: 2px solid;
    } (a) 2px solid (b) #top (c) width (d) .note
30. 30.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
31. 31.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: blue; } (a) black (b) blue (c) green (d) red
32. 32.🌈 Which colour of light is strongest in rgb(192, 127, 36)? (a) red (b) green (c) blue
33. 33.🖌️ Where does the text sit on its line?
    h1 {
      background-color: green;
      color: blue;
      font-size: 16px;
      text-align: left;
    } (a) on the left (b) on the right (c) in the middle
34. 34.🖌️ What colour is behind the letters?
    h1 {
      font-size: 36px;
      background-color: red;
      color: blue;
      text-align: center;
    } (a) white (b) blue (c) red
35. 35.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      font-style: italic;
    }
37. 37.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 15px;
      border: 5px solid black;
      margin: 10px;
    }
40. 40.🖌️ Which CSS property makes the text bold? (a) color (b) background-color (c) font-family (d) font-weight

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