Loading...

CSS Colors

You can target elements. Now paint them. The first color skill is simple: set the text color with the color property. Backgrounds, gradients, and full color math come later — today is readable, reusable foreground color.

What does color do?

The color property sets the foreground color — mainly the color of text. Browsers also use that computed color for things that follow currentColor (borders, SVGs, and some decorations). It does not fill the box behind the text; that is background-color (next modules).

Named colors at a glance

CSS ships many named colors — keywords like teal and navy. Memorize a small everyday set first. Exact hex and rgb() come in the Color Values lesson.

📊 Everyday named colors

Name Feel Typical use
black / white Maximum contrast Body text or page canvas (with care)
navy / teal Calm brand accents Links, headings, notes
maroon / crimson Strong warning or emphasis Errors, sale labels (sparingly)
gray / silver Quiet secondary text Captions, muted labels
transparent Fully see-through Hide a border without removing the property

Set text color with a name

Write a normal declaration: property color, value a named color. Start with body copy so the page feels intentional.

Named color on paragraph text

css
CSS Code 
p {
color: teal;
}

Read the result

Every matching <p> draws its letters in teal. The property name is always color — not text-color or font-color.

Headings can differ from body

You often want a darker title and a calmer paragraph. Separate selectors, separate colors.

Heading accent vs body text

css
CSS Code 
h1 {
color: navy;
}

.lead {
color: gray;
}

Design habit

High-contrast headings help scanning. Soft secondary text keeps captions from shouting. Still use enough contrast for readability.

Color inherits

Children pick up the parent’s color unless they set their own. That is why a color on a container can theme a whole block of text.

Inherited color on a note block

css
CSS Code 
.note {
color: maroon;
}

What inherits?

Inside <div class="note">…</div>, paragraphs and spans inherit maroon until a more specific rule changes them. Inheritance is a feature — not a bug.

currentColor matches the text

currentColor means “use the element’s computed color.” Handy when a border or icon should stay in sync with the text.

Border follows text via currentColor

css
CSS Code 
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}

Why bother?

Change color once — the border follows. No second hard-coded teal to keep in sync.

Themed card (bring it together)

Combine a container color, a calmer child override, and a currentColor accent.

Card theme with override + currentColor

css
CSS Code 
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}

.card .muted {
color: gray;
}

color is not the background

Beginners often type color when they meant the fill behind the text. Remember:

  • color → text (foreground)
  • background-color → the painted box behind content (covered soon)
    Keep those two names distinct from day one.

Try it yourself

  1. Page with a heading, a <p class="lead">, and a <div class="note"> containing a short paragraph.
  2. Set h1 { color: navy; }, p { color: teal; }, and .note { color: maroon; } — confirm each region.
  3. Add .badge { color: teal; border: 2px solid currentColor; } on a small span — border should match the text.
  4. Inside .card, set navy on the card and color: gray on .muted — child override should win for that line.
  5. Optional: try color: transparent on a decorative label and notice the text disappears while layout space remains.

Common mistakes

  • Using color to paint a box background — use background-color later
  • Inventing names (lightishblue) — stick to real CSS keywords or wait for hex/rgb
  • Expecting every property to inherit like color — many do not
  • Jumping straight to long hex strings before named colors feel natural
  • Ignoring contrast (pale gray on white) — pretty but unreadable

Summary

  • color sets foreground text color
  • Named colors (teal, navy, maroon, …) are fine for early work
  • Children inherit color until they override it
  • currentColor reuses the computed text color for borders and friends
  • Leave deep formats (hex, rgb, hsl) for Color Values; backgrounds for later lessons
  • Practice with heading / lead / note until the property feels automatic

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial