CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 773 · 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?
   p {
     text-align: right;
     font-size: 16px;
     background-color: blue;
     color: red;
   } (a) on the right (b) on the left (c) in the middle
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 70px;
     padding: 5px;
     border: 3px solid black;
     margin: 20px;
   }
3. 3.✍️ Which property is set to italic in this rule?
   .note {
     font-weight: bold;
     padding: 8px;
     text-align: center;
     font-style: italic;
   } (a) font-size (b) color (c) italic (d) font-style
4. 4.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) black (d) red
5. 5.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
6. 6.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-weight (d) color
7. 7.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
8. 8.🖌️ Where does the text sit on its line?
   li {
     font-size: 32px;
     background-color: yellow;
     color: purple;
     text-align: left;
   } (a) on the left (b) in the middle (c) on the right
9. 9.What does font-family do? (a) picks the font style (b) makes letters bigger (c) sets the letter colour (d) colours behind the text
10. 10.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
11. 11.True or false: .star is a class selector. (a) False (b) True
12. 12.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
13. 13.🎯 Which CSS selector matches this element?
    <h1 class="big" id="main">Hello</h1> (a) .main (b) h2 (c) #main (d) #logo
14. 14.🖌️ What colour are the letters?
    p {
      font-size: 24px;
      color: black;
      background-color: green;
      text-align: center;
    } (a) purple (b) green (c) black
15. 15.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
16. 16.🌈 Which colour is #ffff00? (a) black (b) magenta (c) yellow (d) red
17. 17.Which of these does CSS do? (a) counts down a timer (b) rounds box corners (c) changes the page live (d) reacts to a button click
18. 18.Which of these is the content? (a) space inside the border (b) the text or picture (c) the gap round content (d) a solid or dotted edge
19. 19.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
20. 20.Which of these is the border? (a) the line round the box (b) the gap round content (c) space inside the border (d) the text or picture
21. 21.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: green; }
    .menu { color: blue; }
    p { color: red; } (a) blue (b) green (c) red (d) black
22. 22.✍️ What is the selector in this CSS rule?
    #top {
      font-size: 20px;
      text-align: center;
      font-weight: bold;
    } (a) li (b) center (c) font-size (d) #top
23. 23.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    .star { color: red; }
    .star { color: purple; } (a) purple (b) red (c) orange (d) black
24. 24.Which of these does JavaScript do? (a) counts down a timer (b) puts a picture on a page (c) sets colours and fonts (d) changes the text size
25. 25.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    #intro { color: green; } (a) purple (b) green (c) white (d) orange
26. 26.🔍 Which is the odd one out? (a) counts down a timer (b) shows a pop-up message (c) rounds box corners (d) changes the page live
27. 27.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    .big { color: red; }
    #main { color: green; } (a) orange (b) green (c) red (d) purple
28. 28.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: blue; } (a) white (b) blue (c) orange (d) yellow
29. 29.🖌️ How big is the text, in px?
    h1 {
      color: purple;
      background-color: black;
      font-size: 20px;
      text-align: center;
    }
30. 30.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) display: flex (d) gap
31. 31.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) content (d) border
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
33. 33.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      color: white;
      font-size: 20px;
      background-color: orange;
    } (a) orange (b) white (c) green
34. 34.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
35. 35.🎯 Which element does the selector p style? (a) <li id="hero"> (b) <h2 class="box"> (c) <p class="box"> (d) <h1>
36. 36.🎯 What kind of selector is #logo? (a) an id selector (b) a class selector (c) an element selector
37. 37.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    h2 { color: black; }
    .star { color: white; } (a) purple (b) white (c) black (d) green
38. 38.🖌️ What colour are the letters?
    p {
      background-color: yellow;
      text-align: left;
      color: blue;
      font-size: 24px;
    } (a) yellow (b) black (c) blue
39. 39.🎯 Which sign starts an id selector? (a) & (b) @ (c) # (d) .
40. 40.🎯 Which CSS selector matches this element?
    <li class="big" id="top">Hello</li> (a) .red (b) .top (c) #big (d) .big

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