CSS Worksheet: Colour and Text Properties

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

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