How to Change Font Color in HTML

The simplest way to change font color in HTML

You change font color in HTML using the style attribute with the CSS property color. The most direct method is to add style="color: colorname;" directly to any text tag, like this:

You can also use a style tag in the head of your document to set colors for entire groups of elements at once, or link to an external CSS file. The three approaches — inline styles, internal stylesheets, and external stylesheets — all do the same job; they differ only in how much code you repeat and how easy it is to change colors across many pages.

Key Takeaways

The inline method style="color: blue;" works immediately on any single element but requires you to repeat the code for every colored piece of text.
Color names like blue, red, and green work in HTML, but hex codes like #FF5733 and RGB values like rgb(255, 87, 51) give you thousands more options.
A style tag in your document head lets you set one rule that colors all paragraphs, all links, or all headings the same way without repeating code.
External CSS files are best for websites with many pages, because changing one file updates the color everywhere at once.

Using inline styles for single elements

The inline style method works on any HTML tag that contains text. Add the attribute style="color: colorname;" inside the opening tag. Here are real examples:

<p style="color: red;">This paragraph is red</p> <h1 style="color: green;">This heading is green</h1> <span style="color: purple;">This span is purple</span> <a href="page.html" style="color: orange;">This link is orange</a>

This method is fast for changing one or two pieces of text, but it becomes tedious if you have many colored elements. You also end up with the same code repeated many times, which makes the file larger and harder to update later.

Specifying colors with names, hex codes, and RGB values

HTML recognizes about 140 color names you can type directly: red, blue, green, yellow, orange, purple, pink, brown, gray, and many others. These are the easiest to remember and type, but they give you only a limited palette.

Hex codes let you specify any of 16 million colors using a six-character code that starts with a hash symbol. #FF0000 is red, #00FF00 is green, and #0000FF is blue. You can find hex codes for almost any color using an online color picker. Example:

<p style="color: #FF5733;">This text is a burnt orange</p>

RGB values work the same way but use three numbers from 0 to 255, one each for red, green, and blue. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green. Example:

<p style="color: rgb(255, 87, 51);">This text is coral</p>

All three formats work identically in modern browsers. Pick whichever you find easiest to work with or remember.

Using a style tag to color multiple elements at once

If you want many paragraphs, headings, or links to be the same color, write a style tag in the head section of your HTML document. This lets you write one rule that applies to every matching element on the page:

<head> <style> p { color: blue; } h1 { color: green; } a { color: purple; } </style> </head>

Now every paragraph on that page will be blue, every h1 heading will be green, and every link will be purple — without adding any style attribute to individual tags. If you later decide all paragraphs should be red instead, you change only one line in the style tag, and the change takes effect everywhere.

You can also target specific elements by giving them a class or id attribute. For example, if you want only some paragraphs to be red, add class="warning" to those paragraphs, then write .warning { color: red; } in your style tag.

Linking to an external CSS file

For websites with many pages, the best approach is to write all your color rules in a separate CSS file and link to it from every HTML page. Create a file called styles.css and put your color rules inside:

p { color: blue; } h1 { color: green; } a { color: purple; }

Then add one line to the head of each HTML page:

Now all your pages use the same colors. If you want to change the color of every paragraph across your entire website, you edit only the styles.css file once, and the change appears on every page that links to it. This saves time and prevents mistakes when managing large websites.

Common mistakes and how to fix them

The most common error is forgetting the colon after the property name. style="color blue;" will not work; it must be style="color: blue;". The colon tells the browser that a value is coming next.

Another mistake is misspelling the color name or using a space in a hex code. color: lite blue; will not work because "lite blue" is not a recognized color name; use color: lightblue; instead, or use a hex code like #ADD8E6. Hex codes must not have spaces.

If your color does not appear, check that you are using the correct tag. The color property changes text color only, not background color. To change the background, use background-color instead. Also make sure your style tag is inside the head section, not the body, and that your external CSS file path is correct.

Frequently Asked Questions

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

Yes. Wrap that word in a <span> tag and add a style attribute to it. For example: <p>This is <span style="color: red;">important</span> text.</p> The span tag does nothing by itself, but the style attribute inside it colors only that word.

What is the difference between color and background-color?

color changes the text itself. background-color changes the color behind the text. You can use both at once: style="color: white; background-color: black;" creates white text on a black background.

Do I need to close a style tag?

Yes. Every opening <style> tag must have a closing </style> tag. The same applies to <head> and </head>. Forgetting the closing tag can break your entire page layout.

Which method should I use: inline, internal, or external CSS?

Use inline styles only for quick tests or single elements. Use internal styles (a style tag in the head) for small single-page projects. Use external CSS files for anything larger, because they are easier to maintain and let you reuse the same styles across many pages.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.