How to Change Text Color in CSS
What you’ll build or solve
Change text color with CSS so headings, links, and UI labels match your design. You’ll use the color property and target the right elements without accidentally recoloring the whole page.
When this approach works best
This approach works best when you want consistent text colors across a site.
Learn CSS on Mimo
Use it when you:
- Set a default text color for your page content.
- Highlight labels like “Error” or “Success” in a UI.
- Style headings and links to match a brand palette.
Skip this approach when:
- You’re changing text color to fake meaning, such as using red instead of showing a clear error message. Add clear text too.
- You need different colors per character or per word in a long paragraph. That can get hard to maintain.
Prerequisites
- An HTML file linked to a CSS file or a
<style>tag - Basic comfort with CSS selectors, such as element selectors and classes
Step-by-step instructions
Step 1: Use the color property to set text color
Text color is controlled with the color property. Pick the option that matches how you want to apply it.
Option A: Set a default text color for the page
CSS
body {
color: #222;
}
Option B: Change color for a specific element
CSS
h1 {
color: #0b5fff;
}
Option C: Use a reusable class for status text
<pclass="error">Payment failed. Try again.</p>
<pclass="success">Saved successfully.</p>
CSS
.error {
color: #b00020;
}
.success {
color: #1b7f3a;
}
What to look for
- If too much text changes color, your selector is too broad. Prefer a class over styling
bodyfor one-off changes. - If link colors don’t change, you may need to target
aand its states like:visitedand:hover. - If the color looks faded, check for
opacityon a parent element.
Examples you can copy
Example 1: Set base text and heading colors
CSS
body {
color: #222;
}
h1,
h2 {
color: #111;
}
Example 2: Style links with a custom color
<aclass="link"href="/docs">Read the docs</a>
CSS
.link {
color: #0b5fff;
}
If you want consistent behavior across states:
CSS
a {
color: #0b5fff;
}
a:visited {
color: #0844c2;
}
a:hover,
a:focus-visible {
color: #06349a;
}
Example 3: Dark mode text colors with a class on <body>
JavaScript
<bodyclass="dark">
<h1>Dashboard</h1>
<p>Status: Online</p>
</body>
CSS
body {
color: #222;
background: #fff;
}
body.dark {
color: #f2f2f2;
background: #111;
}
Common mistakes and how to fix them
Mistake 1: Using background-color when you meant text color
What you might do:
CSS
p {
background-color:red;
}
Why it breaks:
background-color changes the background behind the text, not the text itself.
Correct approach:
Use color for text.
CSS
p {
color:red;
}
Mistake 2: Setting a low-contrast color that’s hard to read
What you might do:
CSS
p {
color: #999;
}
Why it breaks:
Light gray on a light background can be hard to read.
Correct approach:
Pick a darker color, or adjust the background.
CSS
p {
color: #222;
}
Mistake 3: Changing body text color and forgetting links
What you might do:
CSS
body {
color: #222;
}
Why it breaks:
Browsers often apply default link colors that don’t match your design.
Correct approach:
Style links directly.
CSS
a {
color: #0b5fff;
}
Troubleshooting
- If your text color doesn’t change, check for a more specific selector overriding your rule.
- If links stay purple or blue, add a rule for
aanda:visited. - If color changes only in some places, inherited color may be overridden by nested elements.
- If the color looks washed out, check for
opacityon a parent container. - If nothing updates, confirm your stylesheet is loading and not returning a 404.
Quick recap
- Use the CSS
colorproperty to change text color. - Target
bodyfor a default, or target specific elements for precise changes. - Use classes for reusable styles like error and success text.
- Style links separately if browser defaults don’t match your design.
- Keep text readable by avoiding low-contrast colors.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot