CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 503 · 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.🖌️ Where does the text sit on its line?
   h1 {
     background-color: green;
     text-align: left;
     font-size: 12px;
     color: black;
   } (a) in the middle (b) on the right (c) on the left
2. 2.Which of these does CSS do? (a) adds space around boxes (b) changes the page live (c) gives the page structure (d) shows a pop-up message
3. 3.🎯 Which CSS selector matches this element?
   <p class="red" id="main">Hello</p> (a) #red (b) #logo (c) .box (d) p
4. 4.What does background-color do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) colours behind the text
5. 5.🌈 Which colour is #ff0000? (a) magenta (b) red (c) cyan (d) black
6. 6.⚖️ What colour is the text of this element?
   <h2 class="box" id="main">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: white; } (a) blue (b) white (c) green (d) yellow
7. 7.🎯 Which element does the selector #intro style? (a) <li id="main"> (b) <li class="intro"> (c) <div class="note"> (d) <li id="intro">
8. 8.True or false: body is an id selector. (a) False (b) True
9. 9.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   }
10. 10.🌈 Which hex code is cyan? (a) #ffffff (b) #ff0000 (c) #ffff00 (d) #00ffff
11. 11.What does font-size do? (a) picks the font style (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
12. 12.🖌️ What colour are the letters?
    li {
      text-align: center;
      background-color: purple;
      color: blue;
      font-size: 20px;
    } (a) green (b) purple (c) blue
13. 13.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
14. 14.✍️ Which property is set to red in this rule?
    p {
      font-size: 20px;
      color: red;
      padding: 8px;
    } (a) red (b) text-align (c) color (d) font-size
15. 15.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) text-align (d) font-weight
16. 16.What does font-family do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) picks the font style
17. 17.💪 Which flexbox property sets space between boxes? (a) justify-content (b) align-items (c) gap (d) flex-direction
18. 18.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
19. 19.✍️ What value is given to color in this rule?
    #top {
      border: 2px solid;
      color: red;
    } (a) red (b) color (c) center (d) 20px
20. 20.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 300px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
21. 21.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    }
22. 22.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
23. 23.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
24. 24.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      color: red;
      background-color: yellow;
      border: 2px solid;
    } (a) text-align (b) red (c) .note (d) #top
25. 25.🎯 Which CSS selector matches this element?
    <h1 class="note" id="end">Hello</h1> (a) h2 (b) #hero (c) .end (d) .note
26. 26.🌈 Which colour of light is strongest in rgb(218, 43, 60)? (a) red (b) blue (c) green
27. 27.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
28. 28.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
29. 29.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    p { color: white; }
    p { color: blue; } (a) purple (b) black (c) blue (d) white
30. 30.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      background-color: yellow;
      color: red;
      font-weight: bold;
    } (a) .note (b) font-style (c) yellow (d) #top
31. 31.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    #end { color: black; }
    #end { color: green; } (a) green (b) purple (c) black (d) white
32. 32.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    .menu { color: red; }
    h1 { color: blue; } (a) purple (b) black (c) blue (d) red
33. 33.True or false: JavaScript checks a quiz answer. (a) False (b) True
34. 34.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    #logo { color: black; }
    h2 { color: blue; } (a) blue (b) black (c) white (d) yellow
35. 35.🌈 Which colour of light is strongest in rgb(191, 117, 56)? (a) green (b) blue (c) red
36. 36.🖌️ How big is the text, in px?
    li {
      text-align: right;
      background-color: green;
      color: orange;
      font-size: 36px;
    }
37. 37.🎯 Which element does the selector h1 style? (a) <h1 class="menu"> (b) <li class="menu"> (c) <h2> (d) <div id="end">
38. 38.🎯 Can many elements share the same class? (a) Yes (b) No
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
40. 40.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No

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