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 in your HTML tag. You write the color name or code right inside the tag itself, and the browser applies it when ready.

Here is the actual syntax: <p style="color: red;">This text is red.</p> The word color tells the browser you are changing text color (not background color or borders). The word after the colon—red, blue, green—is the color itself. You end with a semicolon and close the tag normally.

This method works on any tag that holds text: paragraphs, headings, links, list items, and spans. It is the method to use when you only need one or two phrases colored differently from the rest of the page.

Key Takeaways

  • The style attribute with color: changes text color on a single tag, and you write it directly inside the opening tag.
  • You can use color names like red, blue, and green, or hex codes like #FF5733 for more precise colors.
  • A CSS class or style block lets you color multiple elements at once without repeating the code in every tag.
  • The color property changes text only; use background-color to change the background behind the text.

Using Hex Codes and RGB for Exact Colors

Color names like red and blue work, but they are limited. If you need a specific shade—a particular teal or a muted orange—you use a hex code or RGB value. Both let you pick from millions of colors instead of the handful of named colors.

A hex code is a six-character code that starts with a hash mark: #FF5733. You write it like this: <p style="color: #FF5733;">This is a custom orange.</p> Each pair of characters controls how much red, green, and blue mix together. You can find hex codes on color picker websites—search "hex color picker" and click on the color you want, and the site will show you the code to copy.

RGB works the same way but uses three numbers from 0 to 255: <p style="color: rgb(255, 87, 51);">This is the same orange.</p> Both hex and RGB produce identical results; use whichever feels easier to you.

Coloring Multiple Elements with a CSS Class

If you want to color many paragraphs, headings, or other elements the same way, writing the style attribute in every single tag gets tedious and hard to update. Instead, create a CSS class once and reuse it.

First, add a style block in the <head> section of your HTML page (the part before the body content starts). Write this:

<style> .highlight { color: #FF5733; } </style>

The period before highlight tells the browser this is a class name. Now, anywhere in your page, you can use that class on any tag: <p class="highlight">This paragraph is orange.</p> and <h2 class="highlight">This heading is also orange.</h2> If you later decide orange should be a different color, you change it once in the style block, and every element using that class updates automatically.

Changing Link Colors

Links are text too, but they have special color rules. By default, unvisited links are blue and visited links are purple. If you want to change those colors, you use a CSS class or a special pseudo-class rule.

The simplest approach is to color individual links with the style attribute: <a href="page.html" style="color: green;">Click here</a> But if you want all links on your page to be green, add this to your style block:

a { color: green; }

This rule colors every link on the page green. If you want unvisited links to be one color and visited links to be another, use a:visited { color: purple; } to target only the links the reader has already clicked.

Background Color vs. Text Color

A common mistake is confusing color (which changes the text itself) with background-color (which changes the color behind the text). If you write style="color: yellow;", the text turns yellow. If you write style="background-color: yellow;", the area behind the text turns yellow, but the text stays its original color.

You can use both together: <p style="color: white; background-color: black;">White text on black.</p> This is useful when you want text to stand out or highlight important information. Just make sure the text color and background color have enough contrast so readers can see the text clearly.

Common Mistakes and How to Avoid Them

The most frequent error is forgetting the semicolon at the end of the color value. style="color: red" (without the semicolon) may still work in most browsers, but style="color: red;" (with the semicolon) is the correct syntax and works everywhere. Always include it.

Another mistake is misspelling the color name. The browser recognizes red, blue, green, orange, purple, pink, gray, and a few dozen others, but not every word. If a color name does not work, switch to a hex code instead—it always works as long as the code is valid.

A third mistake is using colour (the British spelling) instead of color (the American spelling). HTML and CSS only recognize the American spelling, so style="colour: red;" will not work. Stick with color.

Frequently Asked Questions

Can I use color names like "lightblue" or "darkgreen"?

Yes. HTML recognizes extended color names like lightblue, darkgreen, lightcoral, and darkslategray. These are less common than the basic colors, but they work the same way. If you are not sure whether a name exists, a hex code is always safer.

What is the difference between hex and RGB?

They produce identical colors—hex #FF5733 and rgb(255, 87, 51) are the same orange. Hex is more compact to write; RGB is easier to read if you think in terms of red, green, and blue amounts. Use whichever you prefer.

How do I make text transparent or semi-transparent?

Use rgba instead of rgb. The fourth number (0 to 1) controls transparency: color: rgba(255, 87, 51, 0.5); makes the text 50 percent transparent. A value of 1 is fully opaque (solid), and 0 is invisible.

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

Yes. Wrap that word in a <span> tag and explore the style to the span: <p>This word is <span style="color: red;">red</span>.</p> The span tag does nothing on its own—it is just a container for styling a small piece of text.

Will my color choice look the same on every device?

Mostly, but not perfectly. Different screens display colors slightly differently based on brightness, contrast settings, and screen type. Hex codes and RGB are as consistent as possible, but a color on a phone may look slightly different than on a laptop. This is normal and unavoidable.