The Basic Way to Change Font Color

To change font color in HTML, use the style attribute with the CSS property color. The simplest method is to add style="color: colorname;" directly to any text tag. For example, <p style="color: red;">This text is red</p> will display the paragraph in red.

You can specify colors three ways: by name (like red, blue, green), by hex code (like #FF0000 for red), or by RGB values (like rgb(255, 0, 0) for red). Hex codes and RGB give you millions of color options, while color names are simpler but limited to about 140 standard colors.

This inline style method works on any text element: paragraphs, headings, links, list items, and spans. It changes only that one element, so if you want multiple parts of your page the same color, you will repeat the style on each one.

Key Takeaways

  • Add style="color: colorname;" to any HTML tag to change that text's color when ready.
  • Use color names like red or blue for quick changes, or hex codes like #FF0000 for precise control over thousands of shades.
  • A CSS style block in the <head> section lets you set a color rule once and explore it to many elements at once using class names.
  • External CSS files work the same way as style blocks but keep your color rules separate from your HTML, making them easier to update across multiple pages.

Using a Style Block for Multiple Elements

If you want to color many elements the same way without typing the style attribute over and over, use a style block in the <head> section of your HTML. Inside the style block, write a rule that targets elements by class name or tag name, then add that class to each element you want colored.

For example, put this in your <head>:

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

Then use it on any element by adding class="highlight": <p class="highlight">This is orange</p> and <h2 class="highlight">This heading is also orange</h2>. Now if you want to change all highlighted text to a different color, you only edit the style block once instead of finding every element.

You can also target all instances of a tag at once. For example, p { color: blue; } makes every paragraph on the page blue without needing a class name on each one. This is useful when you want a consistent look across your whole page.

Understanding Color Formats

HTML accepts three color formats, and each has a reason to use it. Color names like red, navy, gold, and salmon are the easiest to read and remember. There are about 140 standard names that all browsers understand the same way.

Hex codes start with a hash mark and use six characters: #FF0000 is red, #00FF00 is green, #0000FF is blue. The first two characters control red, the next two control green, and the last two control blue. Each pair goes from 00 (none of that color) to FF (full intensity). Hex codes let you pick from over 16 million colors and are the standard in web design.

RGB values work the same way but use numbers 0 to 255 instead of hex: rgb(255, 0, 0) is red. Some designers find this easier to understand because the numbers are more familiar. You can also use rgba(255, 0, 0, 0.5) to add transparency—the fourth number (called alpha) goes from 0 (invisible) to 1 (solid).

Changing Link Colors

Links have their own color rules because browsers style them differently by default. An unvisited link is usually blue, and a visited link is usually purple. To change link colors, target the <a> tag in your style block.

Use these special states: a:link for unvisited links, a:visited for links you have already clicked, a:hover for the color when your mouse is over the link, and a:active for the color while you are clicking. For example:

<style> a:link { color: green; } a:visited { color: gray; } a:hover { color: orange; } </style>

This makes unvisited links green, visited links gray, and links turn orange when you hover over them. The hover state is especially useful because it gives users feedback that the link is clickable.

Common Mistakes to Avoid

The most common mistake is forgetting the colon after the property name. Write color: red;, not color red;. The semicolon at the end is also required—without it, the browser may ignore the rule or ignore the next rule after it.

Another mistake is misspelling the color name. Browsers understand red and blue, but not redd or blu. If a color name does not work, switch to a hex code instead. Hex codes are more reliable because they use numbers the browser cannot misread.

Do not confuse the CSS property color (which changes text color) with background-color (which changes the background behind the text). If your text is hard to read, you may need to change both—for example, dark text on a dark background is invisible, so you would use color: white; background-color: black; to fix it.

Organizing Colors with External CSS

As your website grows, keeping all your styles in the HTML file becomes messy. A better approach is to create a separate CSS file and link it in your HTML. This keeps your color rules organized in one place and makes it straightforward to update them across many pages at once.

Create a file called styles.css and write your color rules inside it:

.highlight { color: orange; } p { color: navy; } a:hover { color: red; }

Then link it in the <head> of your HTML file with <link rel="stylesheet" href="styles.css">. Now all your HTML pages can use the same CSS file, and changing a color in one place updates it everywhere. This method is standard for any website with more than a few pages.

Frequently Asked Questions

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 together: style="color: white; background-color: black;" makes white text on a black background.

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

Color names work fine. Browsers understand about 140 standard names including lightblue, darkgreen, and salmon. Hex codes give you more options, but names are simpler if the color you want is a standard one.

How do I make text partially transparent?

Use rgba() instead of rgb() and add a fourth number between 0 and 1. For example, color: rgba(255, 0, 0, 0.5); makes red text 50 percent transparent. The number 0 is invisible, and 1 is solid.

Why is my link color not changing even though I added a style?

Inline styles on the link tag itself sometimes do not override browser defaults. Use a style block or CSS file with a { color: yourcolor; } instead. If you want different colors for visited and unvisited links, use a:link and a:visited separately.

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

Yes. Wrap that word in a <span> tag and add a style to it: <p>This word is <span style="color: red;">red</span> and the rest is normal.</p> The span tag does nothing by itself but lets you explore styles to part of a paragraph.