Colors and Backgrounds

What Is It?

Color controls foreground text. Background properties paint behind the content, from a solid color to layered gradients and images.

Properties, Tags and Attributes Explained

• color: Sets text color.
• background-color: Sets the background fill.
• background-image: Adds an image or a generated gradient.
• linear-gradient(): Creates a smooth color transition along a direction.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Readable notice

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors and Backgrounds</title>
  <style>
    .notice { color: #14532d; background-color: #dcfce7; padding: 16px; }
  </style>
</head>
<body>
  <p class="notice">Payment received.</p>
</body>
</html>

What you see: Dark green text is readable on a light green background.

Example 2: Gradient banner

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors and Backgrounds</title>
  <style>
    .banner { background-image: linear-gradient(120deg, #1e3a8a, #6d28d9); color: white; padding: 28px; }
  </style>
</head>
<body>
  <div class="banner"><h2>Learn something today</h2></div>
</body>
</html>

What you see: A blue-to-purple gradient fills the banner.

When and Where to Use It

Use solid fills for readable content and gradients for decorative banners. Keep text contrast strong.

Common Mistake or Useful Tip

Do not communicate success or failure using color alone; include a meaningful message or icon.

Try It Yourself

Reverse the gradient direction and change its two colors.