Change link color using the CSS color property

To change a link's color in HTML, you write a CSS rule that targets the <a> tag. The simplest way is to add a style attribute directly to the link itself, or write a rule in a <style> block that applies to all links on the page.

If you want a single link to be red instead of the default blue, write this:

<a href="https://example.com" style="color: red;">Click here</a>

The color property accepts color names (red, blue, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)). This method works when ready in any browser.

Key Takeaways

  • Add style="color: [color];" directly to an <a> tag to change one link, or write a CSS rule in <style> to change all links at once.
  • Use color names (red, blue), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)) — all three work the same way.
  • Links have four states — normal, hovered, visited, and active — and you can set a different color for each using :hover, :visited, and :active selectors.
  • A <style> block in the <head> section applies to the whole page and is cleaner than adding style attributes to every link.

Change all links on a page at once with a style block

Instead of adding a style attribute to each link, write a single CSS rule in a <style> block inside the <head> section of your HTML. This rule will change every link on the page without you having to edit them individually.

Here is the structure:

<head>   <style>     a {       color: purple;     }   </style> </head> <body>   <a href="page1.html">Link 1</a>   <a href="page2.html">Link 2</a> </body>

Both links will now appear purple. The a selector targets every <a> tag on the page. If you want to change only some links, use a class or ID instead — for example, .highlight-link or #special-link — and add that class or ID to the specific links you want to style.

Set different colors for link states (hover, visited, active)

Links naturally have four states: the normal state you see before clicking, the :hover state when your mouse is over it, the :visited state after you have clicked it, and the :active state while you are clicking. You can set a different color for each.

Here is an example:

<style>   a {     color: blue;   }   a:hover {     color: red;   }   a:visited {     color: purple;   }   a:active {     color: orange;   } </style>

The link starts blue. When you hover over it, it turns red. After you click it, it becomes purple. While you are clicking, it flashes orange. The :hover state is the most useful — it gives readers feedback that the link is clickable.

Use hex codes and RGB for precise colors

Color names like red and blue are straightforward, but they are limited. Hex codes and RGB values let you pick any color you want. A hex code is a six-character code starting with #, like #FF5733. An RGB value uses three numbers between 0 and 255, like rgb(255, 87, 51).

Both of these set the same orange color:

<a href="page.html" style="color: #FF5733;">Link</a> <a href="page.html" style="color: rgb(255, 87, 51);">Link</a>

You can find hex codes and RGB values using an online color picker. Type the color you want into a search engine, and a color picker tool will appear. Copy the hex code or RGB value and paste it into your CSS. Hex codes are more common in practice because they are shorter to type.

Target specific links with classes or IDs

If you want to change the color of only some links, not all of them, use a class or ID. A class can be used on multiple links; an ID should be used on only one.

Here is an example using a class:

<style>   .external-link {     color: green;   } </style> <a href="https://example.com" class="external-link">External link</a> <a href="page.html">Internal link</a>

The external link will be green, and the internal link will be the default blue. To use a class, add class="name" to the <a> tag, then write a CSS rule starting with a period: .name. For an ID, use id="name" on the tag and #name in the CSS.

Common mistakes to avoid

The most common mistake is forgetting the colon in :hover, :visited, or :active. Write a:hover, not a hover. The colon tells the browser this is a special state, not a new selector.

Another mistake is putting the <style> block in the wrong place. It must go inside the <head> section, not in the body. If you put it in the body, the styles may not load correctly.

If a link color is not changing, check that your CSS rule is written correctly and that the selector matches the link you are trying to style. Use your browser's developer tools (press F12 in most browsers) to inspect the link and see what styles are actually applied to it.

Frequently Asked Questions

Can I change the color of just one link without affecting the others?

Yes. Add a style attribute directly to that link: <a href="page.html" style="color: red;">Link</a>. Or give it a unique class in your CSS and add that class only to that link.

What is the difference between a hex code and an RGB value?

They are two ways to write the same color. Hex codes use letters and numbers (like #FF5733), while RGB uses three numbers from 0 to 255 (like rgb(255, 87, 51)). Both work the same way in CSS; hex codes are just shorter to type.

Why is my link color not changing?

Check that your CSS rule is spelled correctly, that the selector matches the link, and that the <style> block is in the <head> section, not the body. Use your browser's developer tools (F12) to inspect the link and see what styles are applied.

Can I change the color of a link when someone hovers over it?

Yes, use the :hover selector. Write a:hover { color: red; } in your CSS to make links turn red when the mouse is over them. This gives readers feedback that the link is clickable.

Should I use a style attribute or a style block?

A <style> block is cleaner if you are styling many links or want to reuse the same style across multiple pages. A style attribute is fine for a single link. For larger projects, move your CSS to a separate file and link it in the <head>.