Applying Color to HTML Elements

CSS provides two fundamental color properties: color sets the foreground color (text and text decorations), and background-color sets the background. Both accept any valid CSS color value — named, hex, RGB, or HSL.

Colors on Borders, Shadows, and SVG

The border-color property sets the color of element borders. The box-shadow and text-shadow properties also accept color values. For SVG elements, fill colors the interior and stroke colors the outline. The special value currentColor is extremely useful — it inherits the element's color property, so borders and SVG icons automatically match the text color.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color in Elements</title>
  <style>
    body { font-family: sans-serif; padding: 24px; }

    .card {
      background-color: #fff;
      color: #333;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 16px;
    }
    .card.success {
      background-color: #e8f5e9;
      color: #1b5e20;
      border-color: #a5d6a7;
    }
    .card.warning {
      background-color: #fff8e1;
      color: #e65100;
      border-color: #ffcc80;
    }
    .card.error {
      background-color: #ffebee;
      color: #b71c1c;
      border-color: #ef9a9a;
    }
    h2 { color: #1a237e; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <h2>Notification Cards</h2>
  <div class="card success"><strong>Success!</strong> Your changes were saved.</div>
  <div class="card warning"><strong>Warning!</strong> Storage is almost full.</div>
  <div class="card error"><strong>Error!</strong> Unable to connect.</div>
</body>
</html>

HTML

Full Editor

Pro Tip

Always check your color contrast ratio with a tool like WebAIM Contrast Checker — WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt+). Failing this makes your content unreadable for low-vision users.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned