CSS Worksheet: Colour and Text Properties

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

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