Text Color

By the end of this lesson, you will be able to set and control the color of text in CSS using named colors, hex codes, rgb(), hsl(), and inherited values.

What it is

In CSS, the color property sets the foreground color of text content. It affects the text inside an element and can also be used by related values such as currentColor. It does not set the background color; that is handled by background-color.

Text color is inherited by child elements unless another rule overrides it. This makes it useful for setting a base text color on body and then adjusting specific elements such as headings, links, or muted text.

Related terms include foreground color, contrast, inheritance, and currentColor.

Why it matters

• It improves readability by creating clear contrast between text and background.
• It helps users understand hierarchy, such as making headings darker than body text.
• It supports interactive states, such as changing link color on hover.
• It enables consistent theming when combined with CSS variables.
• It contributes to accessibility when color choices meet contrast guidelines.

Syntax or steps

1. Select the element whose text you want to style.
2. Use the color property inside a CSS rule.
3. Choose a valid color value, such as red, #334155, rgb(51, 65, 85), or hsl(215, 28%, 27%).
4. Use inherit to take the parent’s color, or currentColor when another property should match the text color.

Example

:root {
  --ink: #1f2937;
  --muted: #64748b;
  --link: #2563eb;
}

body {
  color: var(--ink);
  background-color: #ffffff;
  font-family: system-ui, sans-serif;
}

p {
  color: var(--ink);
}

small {
  color: var(--muted);
}

a {
  color: var(--link);
}

a:hover {
  color: #1d4ed8;
}

This example defines reusable color variables, sets a readable base text color, makes small text muted, and gives links a distinct color that changes on hover.

• :root stores color values so they can be reused.
• body sets the default text color for the page.
• p explicitly uses the main text color.
• small uses a lighter color for secondary text.
• a and a:hover control link color and interaction feedback.

Common mistakes

• Low contrast: Light gray text on a white background can be hard to read. Fix it by testing color pairs and choosing darker text or a darker background.
• Targeting the wrong element: Setting color on body may not affect elements with their own styles, such as links. Fix it by adding more specific selectors.
• Using invalid hex values: #33415 is not a valid six-digit hex color. Use #334155 or a valid three-digit shorthand like #abc.
• Forgetting inherited color: Child elements inherit text color unless overridden. Fix it by checking the cascade and using inherit or currentColor intentionally.

When to use it

Use color when you need to set text color directly. Compare it with related approaches:

Practice

Guided exercise: Create a page where body text is #111827, muted text is #6b7280, and links are #2563eb.

Expected output: Paragraphs appear dark, small text appears gray, and links appear blue.

Challenge: Add a hover state that makes links darker. Solution hint: Use a:hover { color: #1d4ed8; }.

Quick check

Question: What does color: currentColor do?

Answer: It uses the element’s computed text color, which is useful when another property should match the text color.

Summary

The CSS color property controls text foreground color and supports named colors, hex codes, rgb(), hsl(), and inherited values. Use it deliberately to create readable, accessible, and consistent text styling.