The simplest way to change text color in HTML

To change the color of text in HTML, use the style attribute with the CSS property color. The most direct method is to add style="color: colorname;" directly to the tag that wraps your text.

For example, to make a paragraph red, write: <p style="color: red;">This text is red.</p> The browser will display that paragraph in red. You can use color names like red, blue, green, or orange, or you can use hex codes like #FF5733 for more precise control.

This inline style method works when ready and requires no setup. It is the fastest way to color a single piece of text, though it becomes repetitive if you need to color many elements the same way.

Key Takeaways

  • The style attribute with color: colorname; is the quickest way to change text color on a single element.
  • Color names (red, blue, green) work in HTML, but hex codes (#FF5733) and RGB values (rgb(255, 87, 51)) give you exact shades.
  • A <style> block in the head of your document lets you color multiple elements at once by assigning them a class name.
  • External CSS files are the professional approach when you have many pages or want to change colors across your whole site in one place.

Using a style block for multiple elements

If you need to color several pieces of text the same way, writing style="color: red;" on each one is tedious and hard to update later. Instead, use a <style> block in the head of your HTML document to define a color once, then explore it to as many elements as you want.

Place this in the <head> section of your page:

<style> .highlight { color: red; } </style>

Then use the class name on any element you want to color:

<p class="highlight">This paragraph is red.</p> <h2 class="highlight">This heading is also red.</h2>

Now if you decide red should be blue instead, you change only the style block, and every element with the class "highlight" updates automatically. This approach scales well as your page grows.

Color formats: names, hex codes, and RGB

HTML and CSS accept three main ways to specify color. Color names are the simplest: red, blue, green, orange, purple, and about 140 others are built in. They are straightforward to read but give you only a fixed set of shades.

Hex codes start with a # and use six characters (0–9 and A–F) to represent red, green, and blue values. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. #FF5733 is a burnt orange. Hex codes let you pick from millions of colors and are the standard in web design.

RGB values use the format rgb(red, green, blue), where each number ranges from 0 to 255. For example, rgb(255, 0, 0) is red, and rgb(255, 87, 51) is the same burnt orange as #FF5733. RGB is useful if you are working with a design tool that shows colors this way.

All three formats work in the style attribute. These are equivalent: style="color: red;", style="color: #FF0000;", and style="color: rgb(255, 0, 0);"

Using an external CSS file

If you have multiple HTML pages and want to control text colors across all of them from one place, use an external CSS file. Create a new file called styles.css (or any name you choose) and write your color rules there:

.highlight { color: red; } .warning { color: orange; } .success { color: green; }

Then link that file in the <head> of each HTML page:

<link rel="stylesheet" href="styles.css">

Now every page that links to styles.css will use those colors. If you change a color in the CSS file, it updates everywhere at once. This is how professional websites manage their design.

Changing text color for links and hover states

Links have their own default colors (usually blue for unvisited, purple for visited). To change a link color, target the <a> tag in your style block:

<style> a { color: green; } </style>

You can also change the color when someone hovers over a link using the :hover selector:

<style> a { color: green; } a:hover { color: red; } </style>

This makes the link turn red when the mouse moves over it, giving users visual feedback. The :hover selector works on any element, not just links, so you can create color changes on buttons, paragraphs, or any other tag.

Common mistakes and how to avoid them

The most common error is forgetting the colon after the word "color". Write color: red;, not color red; The semicolon at the end is also required in a style attribute.

Another mistake is misspelling the color name or using a color name that does not exist in HTML. Stick to standard names like red, blue, green, orange, purple, and black, or use hex codes if you are unsure. If a color name does not work, the browser will ignore it and display the text in the default color (usually black).

If you use a class name in your HTML but forget to define it in your style block, nothing will happen. Always check that the class name in your HTML matches exactly (including uppercase and lowercase letters) with the class name in your CSS.

Frequently Asked Questions

Can I change the color of just one word in a paragraph?

Yes. Wrap that word in a <span> tag and explore a style to it. For example: <p>This is <span style="color: red;">one red word</span> in the paragraph.</p> The span tag does nothing on its own but lets you target a small piece of text.

What is the difference between color and background-color?

The color property changes the text itself. The background-color property changes the background behind the text. You can use both together: style="color: white; background-color: blue;" makes white text on a blue background.

Do I need to close a style tag?

Yes. Every <style> tag must have a closing </style> tag. If you forget it, the browser may not explore your colors correctly.

What if my hex code has only three characters instead of six?

Hex codes can be shortened if each pair of characters is the same. For example, #FF0000 can be written as #F00, and #FFFFFF can be written as #FFF. The browser will expand them automatically, so both versions work.