The two ways to set text color in HTML

Text color in HTML is controlled through CSS (Cascading Style Sheets), not through HTML tags themselves. You have two practical routes: write the color instruction directly into the tag using the style attribute, or write it once in a separate style section and reuse it across your page. The inline method (style attribute) works when ready and is useful for single changes. The style section method is cleaner for larger pages where you want the same color on many elements.

Both methods use the same CSS property: color. The word "color" tells the browser you are changing text color specifically, not background color or border color. After "color" comes a colon, then your color choice, then a semicolon to end the instruction.

Key Takeaways

  • Use the style attribute inside any tag to change that tag's text color: <p style="color: blue;">Your text</p>
  • Color names like blue, red, green, and orange work in HTML, as do hex codes like #FF5733 and RGB values like rgb(255, 87, 51).
  • A style section at the top of your page lets you name a color once and use it on many tags without repeating the instruction.
  • The color property changes text only; use background-color if you want to change the background behind the text instead.

Using the style attribute for a single color change

The quickest way to change one piece of text is to add style="color: [colorname];" directly into the opening tag. For example, to make a paragraph red, write: <p style="color: red;">This text is red.</p> The browser reads the style attribute, sees the color instruction, and displays the text in red.

You can use this method on any tag that holds text: paragraphs, headings, links, list items, and spans. The syntax stays the same. If you want a heading to be green, write <h2 style="color: green;">My Heading</h2>. The style attribute goes inside the opening tag, before the closing angle bracket.

This method is fastest for one or two changes, but if you need the same color on ten different elements, you will type the instruction ten times. That is where a style section becomes useful.

Setting up a style section for colors you use repeatedly

A style section sits in the head of your HTML document (the part before the body tag) and lets you define colors once, then explore them anywhere. Start with <style>, write your color rules, then close with </style>. Inside, you name the tag or class you want to color, then write the color instruction in curly braces.

For example, if you want all paragraphs to be dark blue, write this in your style section:

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

Now every <p> tag on your page will display in dark blue without you adding style to each one. If you later decide paragraphs should be navy instead, you change it once in the style section and all paragraphs update automatically.

You can also create a class — a named style you explore only to the tags you choose. Write it in the style section like this:

<style> .warning {   color: red; } </style>

Then use it on any tag by adding class="warning": <p class="warning">Do not touch.</p> Only tags with that class will be red. Other paragraphs stay their default color.

Color names, hex codes, and RGB values

HTML recognizes about 140 color names you can type directly: red, blue, green, orange, purple, pink, gold, navy, teal, and many others. These are the easiest to read and remember. Type them exactly as they appear — "red" works, but "Red" or "RED" will not.

For more precise colors, use hex codes (hexadecimal color codes). A hex code is a # followed by six characters: #FF5733 is a shade of orange, #1A1A1A is nearly black. Hex codes let you pick from 16 million colors instead of 140. You can find hex codes for any color you want through a color picker tool online — search "hex color picker" and click on colors until you find the one you need, then copy the code.

RGB values work the same way. RGB stands for Red, Green, Blue, and you specify how much of each to mix. rgb(255, 0, 0) is pure red, rgb(0, 0, 255) is pure blue, rgb(128, 128, 128) is gray. The numbers range from 0 to 255. Use RGB when you are working with a designer who thinks in RGB, or when you want to adjust brightness by changing the numbers slightly.

All three formats work in both the style attribute and the style section. <p style="color: #FF5733;"> and <p style="color: rgb(255, 87, 51);"> produce the same orange.

Changing text color inside links

Links are a special case because browsers style them differently by default — usually blue and underlined. To change a link's text color, target the <a> tag in your style section. Write:

<style> a {   color: purple; } </style>

This makes all links purple. If you want visited links (ones you have already clicked) to be a different color, add another rule:

<style> a {   color: purple; } a:visited {   color: gray; } </style>

The :visited part is a pseudo-class — it targets links in a specific state. You can also use :hover to change the color when someone moves their mouse over the link, which gives users feedback that it is clickable.

Common mistakes and how to fix them

The most common mistake is forgetting the semicolon at the end of the color instruction. style="color: blue" without a semicolon may still work in most browsers, but it is not correct HTML and can cause problems if you add more instructions. Always end with a semicolon: style="color: blue;"

Another mistake is misspelling the color name or using a name that does not exist. "Darkblue" works, but "dark blue" (with a space) does not — HTML color names are one word. If you are unsure whether a color name exists, use a hex code instead.

A third mistake is confusing the color property with background-color. The color property changes the text itself. The background-color property changes the background behind the text. If your text is invisible, it might be because the text color and background color are too similar. Check both.

Finally, remember that a style attribute on a tag overrides a style section rule. If your style section says all paragraphs are blue, but one paragraph has style="color: red;", that paragraph will be red. This is useful when you need one exception, but it can be confusing if you forget you added it.

Frequently Asked Questions

Can I use color names I make up, or do they have to be real HTML colors?

They have to be real HTML color names or valid hex codes or RGB values. The browser does not understand made-up names like "skyblue" (the real name is "lightskyblue"). If you type a name that does not exist, the browser ignores it and the text stays its default color. Use a hex code or RGB value if you are not sure whether a color name exists.

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. If you want red text on a white background, use both: style="color: red; background-color: white;" Separate them with a semicolon.

Do I have to use a style section, or can I always use the style attribute?

You can always use the style attribute on individual tags. A style section is optional but recommended when you want the same color on many tags, because it keeps your code cleaner and makes changes easier. For a single color change, the style attribute is faster.

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

Links have default styles that can be hard to override. Make sure you are targeting the <a> tag in your style section, not the paragraph or container around it. Also check that you did not accidentally add a style attribute to the link tag itself that contradicts the style section — an inline style attribute always wins.

Can I make text a gradient color that fades from one color to another?

Text gradients require a more advanced CSS technique that is beyond basic color changes. You would use background-clip: text combined with a background gradient, which works in most modern browsers but not all. For now, stick with solid colors using the color property.