How to Change Text Color in HTML
What you’ll build or solve
You’ll change text color in HTML using the right method for each situation.
When this approach works best
Changing text color works best when you:
Learn HTML on Mimo
- Highlight part of a sentence, like an error message or status label.
- Apply consistent branding colors across headings and paragraphs.
- Style links differently for normal, visited, and hover states.
- Build reusable classes for repeated UI elements like badges.
This approach is a bad idea if you rely on inline styles everywhere in a larger project. That quickly becomes hard to manage.
Prerequisites
- A code editor
- A browser
- Basic knowledge of HTML tags and CSS selectors
No additional setup is required.
Step-by-step instructions
Step 1: Change color with CSS (recommended)
HTML uses CSS to control text color. The color property sets the text color for any element you target.
Create a simple HTML file:
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Text color</title>
<style>
p {
color: #333333;
}
</style>
</head>
<body>
<p>This paragraph uses a custom text color.</p>
</body>
</html>
CSS supports:
- Hex:
#111827 - RGB:
rgb(17, 24, 39) - HSL:
hsl(220 39% 11%)
Pick one format and stay consistent across your project.
What to look for:
If the color does not change, confirm your selector matches the element you are styling.
Step 2: Target specific elements with a class
Use a class when you want to color some elements but not all of them.
JavaScript
<pclass="muted">This text looks softer.</p>
<p>This text stays default.</p>
<style>
.muted {
color: #6b7280;
}
</style>
Classes make styles reusable. Apply the same class to headings, spans, or buttons.
Step 3: Color part of a sentence with a <span>
Wrap only the words you want to change inside a <span>.
PHP
<p>
Payment status:<spanclass="warning">overdue</span>
</p>
<style>
.warning {
color: #b91c1c;
}
</style>
This keeps your structure clean while styling only part of the text.
Step 4: Use inline styles for quick tests
Inline styles work for one-off cases or fast prototypes.
CSS
<pstyle="color:teal;">Quick test color.</p>
If you repeat the same inline style more than once, convert it into a class instead.
<pclass="accent">First line</p>
<pclass="accent">Second line</p>
<style>
.accent {
color:teal;
}
</style>
Step 5: Style link states
Links have built-in states, so you often want to control their color directly.
JavaScript
<ahref="https://example.com">Visit example</a>
<style>
a {
color: #2563eb;
}
a:visited {
color: #7c3aed;
}
a:hover {
color: #1d4ed8;
}
</style>
What to look for:
Browsers limit what you can change on :visited links for privacy reasons. Stick to color changes only.
Examples you can copy
Example 1: Color a heading and paragraph
JavaScript
<h1class="headline">Welcome</h1>
<pclass="subtitle">Small changes improve readability.</p>
<style>
.headline {
color: #111827;
}
.subtitle {
color: #4b5563;
}
</style>
Example 2: Add colored status labels
PHP
<p>
Build:<spanclass="status ok">passing</span>
</p>
<p>
Deploy:<spanclass="status warn">needs review</span>
</p>
<style>
.status {
font-weight:600;
}
.ok {
color: #15803d;
}
.warn {
color: #b45309;
}
</style>
Example 3: Use CSS variables for consistent theming
JavaScript
<headerclass="site-header">
<h1class="site-title">Docs</h1>
<pclass="site-tagline">Clear, practical guides.</p>
</header>
<style>
:root {
--text: #111827;
--muted: #6b7280;
--brand: #2563eb;
}
.site-header {
color:var(--text);
}
.site-title {
color:var(--brand);
}
.site-tagline {
color:var(--muted);
}
</style>
Common mistakes and how to fix them
Mistake 1: Using the old <font> tag
What you might do
<fontcolor="red">Warning</font>
Why it breaks
The <font> tag is deprecated and mixes content with styling.
Fix
JavaScript
<spanclass="warning">Warning</span>
<style>
.warning {
color:red;
}
</style>
Mistake 2: Forgetting the dot in a class selector
What you might do
JavaScript
<pclass="note">Note text</p>
<style>
note {
color: #2563eb;
}
</style>
Why it breaks
note targets an HTML element named <note>, not a class.
Fix
CSS
.note {
color: #2563eb;
}
Mistake 3: Using background-color instead of color
What you might do
CSS
p {
background-color:red;
}
Why it breaks
background-color changes the background, not the text.
Fix
CSS
p {
color:red;
}
Troubleshooting
If the color does not change, check selector spelling and specificity in DevTools.
If a style works in one file but not another, confirm your CSS file is linked correctly:
<linkrel="stylesheet"href="styles.css"/>
If only some text changes color, another CSS rule may override yours.
If link colors do not update, verify you are styling a, a:visited, or a:hover correctly.
If colors look inconsistent, confirm you are not mixing conflicting styles.
Quick recap
- Use the CSS
colorproperty to change text color. - Target elements with selectors like
p,.class, orspan. - Wrap small text segments in
<span>when needed. - Avoid inline styles for repeated patterns.
- Style link states with
a,a:visited, anda:hover.
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