The Simplest Way: The Style Attribute

The fastest way to change a single word or phrase to a different color is to use the style attribute directly on the text. Write the opening tag, add style="color: colorname", then close the tag. For example: <p style="color: blue">This text is blue.</p> displays the paragraph in blue.

You can name the color by its English word — red, green, blue, orange, purple, black, white — or use a hex code, which is a six-character code that starts with a hash mark. The hex code for red is #FF0000, for blue is #0000FF, and for green is #00FF00. So <p style="color: #FF0000">This text is red.</p> produces the same result as writing color: red.

This method works on any HTML tag that holds text: paragraphs, headings, links, list items, and table cells. It does not work on tags that do not display text, like <div> or <section> — those tags will pass the color down to the text inside them, but the tag itself has no color.

Key Takeaways

  • Use style="color: colorname" inside any text tag to change that text to a single color without touching the rest of your page.
  • Color names (red, blue, green) work in HTML, but hex codes (#FF0000) give you millions of exact shades to choose from.
  • A <style> block in your page head lets you set a color rule once and explore it to many tags at once using a class name.
  • External CSS files are the professional way to manage colors across many pages, because you change the color in one place and it updates everywhere.
  • The <font> tag is outdated and no longer works in modern browsers, so avoid it even if you see it in old examples.

Using a Style Block for Multiple Elements

If you want to change the color of many paragraphs or headings to the same shade, writing style="color:" on each one is repetitive. Instead, add a <style> block inside the <head> section of your HTML page, before the </head> tag. Inside that block, write a rule that says which tags should be which color.

For example, this code makes all paragraphs blue:

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

Now every <p> tag on that page turns blue without you typing anything extra. If you want only some paragraphs to be blue and others to stay black, give those paragraphs a class name. Write <p class="highlight">This paragraph is blue.</p>, then in your style block write .highlight { color: blue; }. The dot before the class name tells the browser you are styling a class, not a tag.

Hex Codes and Color Names: When to Use Each

HTML recognizes about 140 color names — red, blue, green, orange, purple, gold, navy, teal, and many others. These are fast to type and straightforward to read, so they work well for common colors. But if you need a specific shade — a particular blue that matches your logo, or a light gray for a background — you need a hex code.

A hex code is six characters long and starts with #. The first two characters control red, the next two control green, and the last two control blue. Each pair can be any number from 00 to FF (in a counting system called hexadecimal). #FF0000 is pure red because red is at maximum (FF) and green and blue are at zero. #0000FF is pure blue. #FFFFFF is white (all three at maximum), and #000000 is black (all three at zero).

You can find hex codes for almost any color by searching "hex color picker" in your browser. Paste the code into your HTML the same way you would a color name: style="color: #FF6B35" or inside a style block: p { color: #FF6B35; }.

External CSS Files for Colors Across Many Pages

If your website has more than one page and you want all of them to use the same colors, putting a style block on each page is wasteful. Instead, create a separate file called style.css (or any name ending in .css) and write all your color rules there. Then link that file to every HTML page using a single line in the <head>: <link rel="stylesheet" href="style.css">.

Now if you want to change a color, you change it once in the CSS file and it updates on every page that links to it. This is how professional websites manage their colors — it saves time and keeps everything consistent. The CSS file contains the same rules you would write in a style block, just without the <style> tags around them.

RGB and RGBA: Another Way to Write Colors

Besides color names and hex codes, you can write colors using RGB, which stands for red, green, blue. Instead of a six-character code, you write three numbers from 0 to 255, separated by commas: style="color: rgb(255, 0, 0)" produces red. The first number is the amount of red, the second is green, the third is blue. rgb(0, 0, 255) is blue, and rgb(128, 128, 128) is gray.

RGBA is the same thing with a fourth number added for transparency, called the alpha channel. The alpha number goes from 0 (completely see-through) to 1 (completely solid). So color: rgba(255, 0, 0, 0.5) is red at half transparency. RGB and RGBA are less common than hex codes in practice, but they are useful when you need transparency or when you are working with colors generated by code.

What Not to Do: The Outdated Font Tag

Older HTML pages sometimes use a <font> tag with a color attribute, like <font color="red">This text is red.</font>. This tag no longer works in modern browsers and is considered bad practice. If you see it in an old tutorial or example, ignore it and use the style attribute or a style block instead.

The reason the font tag was removed is that HTML is supposed to describe what content is (a paragraph, a heading, a list), not how it looks. The style attribute and CSS files handle the appearance, keeping content and design separate. This separation makes your code easier to maintain and update.

Frequently Asked Questions

Can I change the color of a link?

Yes. Links are <a> tags, so you can use style="color: red" on them just like any other tag. However, links have special states — unvisited, visited, and hovered — and you usually want different colors for each. To do this properly, use a style block with pseudo-classes: a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; }.

What if the color I want is not a named color?

Use a hex code or RGB value. Search "hex color picker" online, paste in the color you want, and copy the code it gives you. Hex codes let you choose from millions of shades, so you can match any color exactly.

Does changing font color affect the whole page or just one element?

It depends on where you put the rule. The style attribute on a single tag changes only that tag. A rule in a style block changes all matching tags on that page. A rule in an external CSS file changes all matching tags on every page that links to that file.

Can I make text fade from one color to another?

Not with a straightforward color property. That requires a CSS feature called a gradient, which is more advanced. For now, stick with solid colors using the methods described here.