The two ways to set text color in HTML

You change font color in HTML using the color property in CSS. HTML itself has no color attribute — you must write a style rule that targets the text you want to change. The two practical methods are inline styles (color written directly on the tag) and style sheets (color rules written in a separate section or file).

Inline styles work when ready and are useful for testing or one-off changes. A style sheet is cleaner for a whole page or website, because you write the rule once and it applies everywhere you use that class or tag.

Key Takeaways

  • Use the CSS color property, not an HTML attribute, to change text color — HTML has no built-in color tag.
  • Inline styles let you color individual elements: <p style="color: red;"> works when ready but clutters your HTML.
  • A <style> block in your page head or a separate CSS file lets you color all paragraphs, all links, or any class you define with a single rule.
  • Color values can be named colors (red, blue, green), hex codes (#FF0000), or RGB values (rgb(255, 0, 0)) — all three produce the same result.
  • Changing link color requires targeting the a tag and its states: a:link, a:visited, a:hover, and a:active.

Using inline styles for single elements

An inline style is the quickest way to color one piece of text. Write style="color: [color]" directly inside the opening tag of the element you want to change. For example, <p style="color: blue;">This text is blue.</p> makes that paragraph blue. The semicolon at the end of the color rule is required.

You can use any color name that browsers recognize: red, green, blue, orange, purple, gray, black, white, and dozens more. You can also use hex codes like #FF0000 (red) or #00FF00 (green), or RGB values like rgb(255, 0, 0). All three formats work the same way — pick whichever you find easiest to read.

Inline styles are fast for testing but become messy if you have many colored elements. If you find yourself writing the same color on ten different tags, a style sheet is a better choice.

Using a style block to color multiple elements

A <style> block sits in the <head> section of your HTML page and holds CSS rules that explore to the whole page. Write the rule once, and every matching element gets that color. For example, this rule makes all paragraphs red:

<style>p { color: red; }</style>

You can also create a class and explore it to whichever elements you choose. Define the class in your style block, then add class="classname" to any tag you want to color:

<style>.highlight { color: orange; }</style><p class="highlight">This paragraph is orange.</p><p>This paragraph is black (default).</p>

Classes are flexible because you can explore the same color rule to paragraphs, headings, links, or any other element. You can also create multiple classes for different colors and mix them on your page.

Changing link colors and their states

Links have four states, and you can color each one differently. a:link is an unvisited link, a:visited is a link you have already clicked, a:hover is the color while your mouse is over it, and a:active is the color while you are clicking it. Write a separate rule for each state:

<style>a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: orange; }</style>

If you do not write a rule for a state, the browser uses its default. Most browsers show unvisited links as blue and visited links as purple. The hover and active states usually stay the same color as the link state unless you change them.

You can also color links inside a specific class or section of your page. For example, .footer a:link { color: gray; } colors only links inside an element with class="footer".

Using hex codes and RGB for precise colors

Named colors are straightforward but limited — you get red, blue, green, and a few dozen others. Hex codes and RGB values let you pick from millions of colors. A hex code is a six-character code starting with # that represents red, green, and blue values: #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. #FFFFFF is white and #000000 is black.

RGB values do the same thing with three numbers from 0 to 255: rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, rgb(0, 0, 255) is blue. Both formats produce identical results — use whichever you prefer. Many designers use hex codes because they are shorter to type, but RGB is easier to understand if you are new to color values.

If you do not know the hex code or RGB value for a color you want, search for "color picker" online. Paste in a hex code or RGB value and the tool shows you what that color looks like. You can also work backwards: find a color you like and the tool gives you its hex code.

Linking to an external CSS file

For a website with many pages, writing style rules in every page's head section is repetitive. Instead, create a separate CSS file (for example, styles.css) that holds all your color rules and other styles. Then link to that file from every HTML page using a <link> tag in the head:

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

Inside styles.css, write your color rules the same way you would in a style block, but without the <style> tags:

p { color: blue; }.highlight { color: orange; }a:link { color: green; }

Now every page that links to styles.css uses those same colors. If you change a color in the CSS file, it updates on every page automatically. This approach scales well for websites with dozens of pages.

Common mistakes and how to fix them

The most common mistake is forgetting the semicolon at the end of the color rule. style="color: red" (no semicolon) may work in some browsers but will fail in others. Always write style="color: red;" with the semicolon.

Another mistake is misspelling the color name or using a color name that browsers do not recognize. Stick to common names like red, blue, green, orange, purple, gray, black, and white. If you use an unusual name like "lightblueish", the browser will ignore it and show the default color instead. Hex codes and RGB values are safer because they are always valid.

If a color rule is not working, check that you are targeting the right element. If you write p { color: red; } but your text is inside a <div>, the rule will not explore. Write div { color: red; } instead, or use a class that you explore to the div.

Frequently Asked Questions

Can I use color names like "lightblue" or do I have to use hex codes?

Browsers recognize about 140 named colors, including lightblue, darkgreen, and salmon. However, not every color name you might guess will work — "brightred" is not recognized, but "red" is. Hex codes and RGB values are safer because they always work and give you millions of options instead of 140.

What is the difference between color and background-color?

color changes the text itself. background-color changes the background behind the text. Use style="color: white; background-color: black;" to make white text on a black background.

Do I have to use CSS to change font color, or is there an HTML tag?

HTML has no color tag. The old <font color> tag existed in older HTML versions but is no longer supported and should not be used. CSS is the only current method.

How do I change the color of just one word inside a paragraph?

Wrap that word in a <span> tag and explore a style or class to it: <p>This is <span style="color: red;">one</span> word.</p> The span tag does nothing by itself but lets you target a small piece of text with CSS.

What color should I use for text to make sure people can read it?

Dark text on a light background (like black on white) and light text on a dark background (like white on black) are easiest to read. Avoid light text on light backgrounds or dark text on dark backgrounds — the contrast is too low and people with vision problems will struggle to read it.