The three ways to set text color in HTML

You change text color in HTML using the color property in CSS, not through HTML tags alone. HTML provides the structure of your page, but CSS controls how it looks — including color. There are three practical ways to do this: inline styles (color code written directly on a tag), internal stylesheets (color rules in a <style> block at the top of your page), and external stylesheets (color rules in a separate .css file linked to your HTML).

The simplest route for learning is inline styles, because you see the result when ready on a single tag. The most professional route for real websites is an external stylesheet, because you can reuse the same colors across dozens of pages without repeating code. Internal stylesheets sit in the middle — useful for single-page projects or when you want all your styling in one HTML file.

Key Takeaways

  • Text color uses the CSS color property, written as style="color: red;" or color: red; depending on where you place it.
  • Color values can be written as named colors (red, blue, green), hex codes (#FF0000), or RGB values (rgb(255, 0, 0)).
  • Inline styles work on a single tag but become hard to maintain if you need the same color in many places.
  • External stylesheets let you define a color once and use it everywhere, making changes faster and keeping your code cleaner.

Inline styles: color on a single tag

An inline style is CSS written directly into an HTML tag using the style attribute. For text color, you write style="color: colorvalue;" where colorvalue is the color you want. Here is a real example:

<p style="color: blue;">This text will be blue.</p>

The browser reads this tag and displays the paragraph text in blue. You can use this on any tag that contains text: <p>, <h1>, <span>, <a>, or <li>. The inline style only affects that one tag, so if you have ten paragraphs and want nine of them blue, you would have to type the style attribute nine times.

Internal stylesheets: color rules in a <style> block

An internal stylesheet is a <style> block placed in the <head> section of your HTML page. Inside it, you write CSS rules that explore to all matching tags on that page. Here is the structure:

<head><style>p { color: green; }</style></head>

This rule says: every <p> tag on this page will have green text. You do not need to add a style attribute to each paragraph — the rule applies automatically. If you want only some paragraphs green, you can use a class name instead. Add class="highlight" to the tags you want colored, then write the rule as .highlight { color: green; }.

Internal stylesheets work well for single-page projects or when you want to keep all your code in one file. They are faster to set up than external stylesheets but harder to maintain if you have many pages, because you have to repeat the same rules in each page's <style> block.

External stylesheets: color rules in a separate .css file

An external stylesheet is a separate file with a .css extension that contains only CSS rules. You link it to your HTML page using a <link> tag in the <head> section. Here is how it works:

In your HTML file, add this line in the <head>:<link rel="stylesheet" href="styles.css">

Then create a file called styles.css in the same folder and write your color rules inside it:p { color: purple; }h1 { color: navy; }

Now every <p> tag on every page that links to styles.css will be purple, and every <h1> will be navy. If you need to change all your paragraph text to a different color, you change it once in styles.css and the change appears everywhere. This is why external stylesheets are standard practice on real websites — they save time and prevent mistakes.

Color values: names, hex codes, and RGB

CSS accepts three main ways to write color values. Named colors are words the browser recognizes: red, blue, green, orange, purple, navy, teal, and about 140 others. They are easiest to read but offer limited choices.

Hex codes are six-digit codes starting with a hash symbol: #FF0000 is red, #00FF00 is green, #0000FF is blue. Hex codes let you specify any of 16 million colors. If you use a design tool like Figma or Photoshop, it can give you the hex code for any color you pick.

RGB values use the format rgb(red, green, blue) where each number ranges from 0 to 255. Pure red is rgb(255, 0, 0), pure green is rgb(0, 255, 0), and pure blue is rgb(0, 0, 255). RGB is useful when you are working with code that generates colors mathematically.

All three methods work in inline styles, internal stylesheets, and external stylesheets. Use whichever is easiest for your situation: named colors for quick testing, hex codes when you have a design to match, and RGB when you are building dynamic colors in JavaScript.

Common mistakes and how to avoid them

The most common mistake is forgetting the colon after color. The correct syntax is color: red; not color red;. The browser will ignore the rule if the colon is missing.

Another mistake is misspelling the color name or using a hex code with the wrong format. Named colors must be spelled exactly: colour (British spelling) will not work in CSS. Hex codes must start with # and use six digits: #FF0000 works, but FF0000 or #FF00 will not.

If you use an inline style and it does not work, check that the style attribute is inside the opening tag, not after it. <p style="color: red;">Text</p> is correct. <p> style="color: red;" is wrong.

If you use an internal or external stylesheet and the color does not appear, make sure the CSS rule matches the HTML tag or class name exactly. If your HTML says <p class="intro">, your CSS rule must be .intro { color: red; } with the dot before the class name.

When to use each method

Use inline styles when you are testing or learning, or when a single tag needs a unique color that no other tag shares. Inline styles are quick to write but messy to maintain in large projects.

Use internal stylesheets for single-page websites, portfolios, or when you want to keep everything in one file. They are cleaner than inline styles but still limited to one page.

Use external stylesheets for any website with more than one page, or any project you plan to maintain or expand. External stylesheets scale well, make global changes straightforward, and keep your HTML file focused on structure rather than appearance.

Frequently Asked Questions

Can I change the color of a link without changing the color of regular text?

Yes. Links use the <a> tag, so you can target them separately. In a stylesheet, write a { color: purple; } to color all links purple. You can also use inline styles on individual links: <a href="page.html" style="color: orange;">Click here</a>.

What if I want different colors for different paragraphs?

Use class names. Add class="warning" to some paragraphs and class="success" to others, then write two rules in your stylesheet: .warning { color: red; } and .success { color: green; }. This is cleaner than inline styles when you have many colored elements.

Does the color property work on all HTML tags?

The color property works on any tag that contains text, including paragraphs, headings, links, list items, and spans. It does not work on tags that do not display text, like <div> or <img>, though it will affect text inside them.

Can I use color names I make up, or do I have to use the standard ones?

You must use color names the browser recognizes, hex codes, or RGB values. The browser has no way to know what "mycolor" means. If you want to reuse a custom color across your site, define it once in your stylesheet and use a class name instead: .brand-color { color: #2E5090; }.

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: black;" creates white text on a black background.