Home » Exercises » CSS Exercises » CSS Text and Colors

CSS Text and Colors

Write CSS to change the text colour and background of a paragraph

Description: Create a paragraph with white text on a dark blue background, with some padding.

Hint:

  • Use color for the text and background-color for the background.
  • Add padding so the text does not touch the edges.

CSS for text colour and background

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: darkblue;
      padding: 12px;
    }
  </style>
</head>
<body>
  <p>White text on a dark blue background.</p>
</body>
</html>

Output in the browser:

Output in the browser

White text on a dark blue background.

How it works

  • The selector p applies the rule to every paragraph.
  • color changes the text colour, and background-color changes the area behind it.

Read CSS Colors.

Write CSS to style a heading (centre, uppercase, letter spacing)

Description: Style an h1 heading so that it is centred, in capital letters, with extra space between the letters and a line below it.

Hint:

  • Use text-align, text-transform, letter-spacing and border-bottom.

CSS to style a heading

<style>
  h1 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-bottom: 3px solid #0073aa;
    padding-bottom: 8px;
  }
</style>

<h1>Welcome to my site</h1>

Output in the browser:

Output in the browser

Welcome to my site

How it works

  • text-transform: uppercase shows the text in capitals, though it is written in small letters in HTML.
  • letter-spacing adds space between the letters.

Read CSS Text.