How to change text color in HTML is one of the most common questions for people who are just starting to build web pages. In practice, HTML itself does very little styling, so text color is usually handled with CSS.
The simplest method: the CSS color property
To set a text color, use the color property. It works for any text-based element: a paragraph, heading, link, or text block.
Example:
- HTML: <p class="note">This is text</p>
- CSS: .note { color: #e11d48; }
In this example, the text becomes a pink-red shade. You can use a color name, a HEX code, RGB, or HSL value.
Inline style: quick, but not always convenient
If you only need to change the color in one place, you can add the style directly inside the tag:
<p style="color: blue;">Blue text</p>
This option is useful for a quick test or a small one-off edit. But if the page has many elements, it is better to move styles into a separate CSS file or at least into a <style> block in the head.
How to change text color with a class
The cleanest approach is to create a class and apply it to the elements you need. This is especially helpful when several blocks should share the same styling.
Example:
- <p class="success">Success message</p>
- .success { color: green; }
This method also makes maintenance easier: if you want to change the color later, you only need to update one rule.
Common color formats
In CSS, text color is often defined with these values:
- Color name: red, black, white
- HEX: #ff0000, #222222
- RGB: rgb(255, 0, 0)
- HSL: hsl(0, 100%, 50%)
For precise design work, HEX or RGB are usually more practical. For simple edits, color names are often enough.
What to watch out for
After changing the color, check contrast. Light text on a light background or dark text on a dark background is hard to read, especially on mobile screens. Also remember that styles can override each other: if the color does not change, check whether another CSS rule with higher priority is taking effect.
If you are working with links, buttons, or text inside a more complex layout, classes and external CSS are usually the better choice. They keep the code cleaner and help avoid messy markup.
So, how to change text color in HTML is best handled with the CSS color property. For a quick test, inline style is fine, but for proper layout work, classes and separate style rules are the more reliable option.
