CSS Worksheet: Colour and Text Properties

HTML and CSS lesson 14: Colour and text properties · Set 923 · 40 questions

Code tip (Letters, behind, size, place): color = colour of the letters; background-color = colour behind them. font-size = how big (e.g. 20px); font-weight: bold = thick letters; font-family = the font. text-align: left / center / right places the text on its line.

1. 1.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) background-color (d) text-align
2. 2.What does background-color do? (a) makes letters bigger (b) centres a heading (c) colours behind the text (d) sets the letter colour
3. 3.🖌️ Which CSS property makes the text bold? (a) color (b) background-color (c) font-weight (d) font-size
4. 4.🖌️ What colour is behind the letters?
   h2 {
     text-align: left;
     background-color: white;
     font-size: 36px;
     color: black;
   } (a) blue (b) white (c) black
5. 5.🖌️ How big is the text, in px?
   h1 {
     font-size: 12px;
     background-color: blue;
     text-align: left;
     color: red;
   }
6. 6.🖌️ How big is the text, in px?
   h1 {
     font-size: 12px;
     color: orange;
     background-color: white;
     text-align: center;
   }
7. 7.🖌️ Where does the text sit on its line?
   h2 {
     background-color: yellow;
     text-align: center;
     font-size: 28px;
     color: blue;
   } (a) on the right (b) in the middle (c) on the left
8. 8.🖌️ What colour are the letters?
   p {
     background-color: white;
     text-align: left;
     font-size: 28px;
     color: yellow;
   } (a) green (b) yellow (c) white
9. 9.🖌️ Where does the text sit on its line?
   h2 {
     font-size: 16px;
     background-color: red;
     text-align: center;
     color: yellow;
   } (a) on the right (b) on the left (c) in the middle
10. 10.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      font-size: 28px;
      color: red;
      background-color: green;
    }
11. 11.What does font-size do? (a) picks the font style (b) colours behind the text (c) makes the text bold (d) makes letters bigger
12. 12.🖌️ How big is the text, in px?
    li {
      background-color: red;
      color: green;
      text-align: right;
      font-size: 12px;
    }
13. 13.What does font-family do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) colours behind the text
14. 14.What does font-weight do? (a) picks the font style (b) sets the letter colour (c) makes the text bold (d) makes letters bigger
15. 15.🖌️ What colour is behind the letters?
    li {
      font-size: 24px;
      text-align: left;
      color: orange;
      background-color: blue;
    } (a) yellow (b) blue (c) orange
16. 16.🖌️ What colour is behind the letters?
    h2 {
      color: green;
      background-color: orange;
      text-align: center;
      font-size: 24px;
    } (a) green (b) purple (c) orange
17. 17.What does color do? (a) picks the font style (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
18. 18.🖌️ What colour are the letters?
    p {
      color: white;
      background-color: red;
      font-size: 20px;
      text-align: right;
    } (a) black (b) red (c) white
19. 19.🖌️ What colour are the letters?
    h2 {
      text-align: right;
      font-size: 32px;
      background-color: white;
      color: green;
    } (a) red (b) green (c) white
20. 20.What does text-align do? (a) sets the letter colour (b) makes the text bold (c) centres a heading (d) makes letters bigger
21. 21.🖌️ What colour is behind the letters?
    h2 {
      font-size: 24px;
      color: purple;
      background-color: blue;
      text-align: center;
    } (a) red (b) blue (c) purple
22. 22.🖌️ What colour is behind the letters?
    li {
      font-size: 36px;
      text-align: right;
      color: green;
      background-color: purple;
    } (a) purple (b) red (c) green
23. 23.🖌️ How big is the text, in px?
    li {
      background-color: purple;
      font-size: 20px;
      color: black;
      text-align: right;
    }
24. 24.🖌️ How big is the text, in px?
    h1 {
      text-align: right;
      background-color: purple;
      font-size: 24px;
      color: orange;
    }
25. 25.🖌️ What colour are the letters?
    h1 {
      font-size: 32px;
      color: orange;
      background-color: purple;
      text-align: left;
    } (a) purple (b) green (c) orange
26. 26.🖌️ How big is the text, in px?
    h1 {
      color: green;
      text-align: right;
      background-color: orange;
      font-size: 32px;
    }
27. 27.🖌️ What colour is behind the letters?
    h1 {
      color: orange;
      font-size: 24px;
      text-align: center;
      background-color: black;
    } (a) yellow (b) orange (c) black
28. 28.🖌️ What colour are the letters?
    p {
      text-align: left;
      font-size: 28px;
      background-color: green;
      color: orange;
    } (a) green (b) red (c) orange
29. 29.🖌️ What colour are the letters?
    li {
      font-size: 28px;
      background-color: black;
      color: orange;
      text-align: left;
    } (a) red (b) black (c) orange
30. 30.🖌️ How big is the text, in px?
    h1 {
      color: yellow;
      text-align: center;
      font-size: 28px;
      background-color: red;
    }
31. 31.🖌️ What colour are the letters?
    h1 {
      background-color: green;
      color: purple;
      font-size: 40px;
      text-align: right;
    } (a) purple (b) green (c) red
32. 32.🖌️ What colour is behind the letters?
    p {
      font-size: 16px;
      text-align: center;
      color: green;
      background-color: red;
    } (a) red (b) green (c) orange
33. 33.🖌️ What colour are the letters?
    h1 {
      color: yellow;
      text-align: left;
      font-size: 32px;
      background-color: purple;
    } (a) white (b) yellow (c) purple
34. 34.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      font-size: 36px;
      color: yellow;
      background-color: purple;
    } (a) in the middle (b) on the left (c) on the right
35. 35.🖌️ What colour is behind the letters?
    li {
      font-size: 20px;
      text-align: right;
      color: black;
      background-color: white;
    } (a) yellow (b) black (c) white
36. 36.🖌️ Where does the text sit on its line?
    li {
      background-color: white;
      text-align: left;
      font-size: 20px;
      color: blue;
    } (a) in the middle (b) on the left (c) on the right
37. 37.🖌️ How big is the text, in px?
    p {
      background-color: blue;
      font-size: 12px;
      color: yellow;
      text-align: left;
    }
38. 38.🖌️ What colour are the letters?
    h2 {
      color: red;
      background-color: white;
      font-size: 20px;
      text-align: right;
    } (a) white (b) red (c) orange
39. 39.🖌️ Where does the text sit on its line?
    p {
      background-color: black;
      text-align: left;
      color: blue;
      font-size: 12px;
    } (a) in the middle (b) on the left (c) on the right
40. 40.🖌️ What colour is behind the letters?
    li {
      color: white;
      font-size: 16px;
      background-color: yellow;
      text-align: right;
    } (a) yellow (b) white (c) green

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