The color property sets the foreground color of an element's text content, and by inheritance, also affects text in nested elements unless explicitly overridden.

Syntax

color: value;

Deep Dive Course

color accepts several value formats: named colors like red or steelblue, hexadecimal notation like #ff0000, functional notation like rgb(255, 0, 0) or hsl(0, 100%, 50%), and modern formats supporting an alpha/transparency channel, like rgba() or hsl() with a fourth value. Unlike most CSS properties, color is inherited by default, meaning a color set on a parent element automatically applies to its text-containing descendants unless a more specific rule overrides it further down the tree, which is exactly why setting a base text color once on the body element commonly affects the whole page's text without repeating that declaration everywhere.

1Understanding Color

💡

Take advantage of color's automatic inheritance by setting a base text color once on the body or a root element, rather than repeating the same color declaration on every individual text element throughout the page.

editor.html

body {
  color: #333;
}

localhost:3000

2Practical Example

Here is a real-world application of Color showing how it is used in production CSS code.

editor.html

.warning {
  color: rgba(200, 0, 0, 0.8);
}

localhost:3000

3Best Practices

Follow these guidelines when working with Color:

1. Set a base color once on a high-level element like body, relying on inheritance to apply it throughout the page's text by default

2. Use HSL notation, hsl(hue, saturation%, lightness%), when you want to programmatically or visually reason about adjusting a color's lightness or saturation, since it's more intuitive for that than hex or RGB

3. Check color contrast against the background for accessibility, ensuring text remains legible for users with visual impairments

⚠️

Tip: Take advantage of color's automatic inheritance by setting a base text color once on the body or a root element, rather than repeating the same color declaration on every individual text element throughout the page.

editor.html

body {
  color: #333;
}

localhost:3000

Examples

Example 01Basic Usage

body {
  color: #333;
}

Example 02Advanced Example

.warning {
  color: rgba(200, 0, 0, 0.8);
}

Best Practices

Set a base color once on a high-level element like body, relying on inheritance to apply it throughout the page's text by default
Use HSL notation, hsl(hue, saturation%, lightness%), when you want to programmatically or visually reason about adjusting a color's lightness or saturation, since it's more intuitive for that than hex or RGB
Check color contrast against the background for accessibility, ensuring text remains legible for users with visual impairments

Interview Question

Why does setting color on the <body> element typically apply to text throughout the entire page, when most other CSS properties don't behave this way by default?▼

Hint: Think about the specific CSS concept of property inheritance, and which properties are and aren't inherited by default.

CSS designates certain properties, mostly ones related to text, like color, font-family, and line-height, as inherited by default, meaning that unless a descendant element or a more specific rule explicitly overrides that property, it automatically receives the same computed value as its parent, cascading down through the entire tree from wherever it was originally set. color is specifically one of these inherited properties, which is exactly why setting it once on a high-level ancestor like body flows down and applies to every nested text-containing element by default, without needing to repeat that same declaration on every individual paragraph, span, or heading throughout the page. Most other CSS properties, like margin, padding, width, and border, are explicitly not inherited by default, since inheriting spacing or sizing properties automatically would generally produce confusing, unpredictable layouts rather than the sensible, consistent behavior that makes sense specifically for text-related properties like color.

Exercises

MediumPractice using Color in a real scenario.

View Solution

body {
  color: #333;
}

Frequently Asked Questions

Why does setting color on the <body> element typically apply to text throughout the entire page, when most other CSS properties don't behave this way by default?▼

Related Functions

Background-colorOpacityFont-family