Change link color using the CSS color property

The fastest way to change a link color is to add a style attribute directly to the <a> tag. Write <a href="page.html" style="color: blue;">Click here</a> and the link will display in blue instead of the default purple or blue.

You can use any color name (red, green, orange), a hex code (#FF5733), or an RGB value (rgb(255, 87, 51)). The color you set applies only to that single link. If you want to change many links at once, a stylesheet is faster and keeps your code organized.

Key Takeaways

  • Add style="color: [color];" directly to any <a> tag to change that one link's color without affecting others.
  • Use a <style> block in your HTML head to change all links, visited links, and hovered links at once across the entire page.
  • The a:hover selector lets you set a different color when someone moves their mouse over a link, giving readers visual feedback.
  • Hex codes (#FF5733) and color names (blue, red) both work; hex codes give you more precise control over exact shades.
  • Visited links (ones the reader has already clicked) use the a:visited selector and need their own color rule to distinguish them.

Change all links on a page using a style block

If you want every link on your page to be the same color, add a <style> block inside the <head> section of your HTML. Write this code between <head> and </head>:

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

Now every link on that page will be dark blue. You can replace darkblue with any color name, hex code, or RGB value. This method is cleaner than adding style to each link one at a time, especially if your page has many links.

The style block approach also makes it easier to update colors later. If you decide all your links should be green instead of dark blue, you only change one line of code rather than editing every single link tag.

Set different colors for unvisited and visited links

By default, links a reader has already clicked appear in a different color (usually purple). You can control both colors separately using a:link for unvisited links and a:visited for visited ones.

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

The :link selector applies to links the reader has not clicked yet. The :visited selector applies to links they have already visited. This helps readers know which pages they have already seen and reduces the chance they will click the same link twice by mistake.

Browsers track visited links through the browser history, so the visited state updates automatically. You do not need to do anything special — just define the color you want visited links to show.

Change link color when someone hovers over it

You can make a link change color when a reader moves their mouse over it. Use the a:hover selector inside your style block:

<style> a { color: blue; } a:hover { color: red; } </style>

Now links will be blue normally, but turn red when someone hovers their cursor over them. This gives readers visual feedback that the link is clickable and interactive. You can also add a:active to set a color for the moment someone is actively clicking the link, which creates an even more responsive feel.

Common color formats and how to use them

HTML accepts three main ways to write colors. Color names are the simplest: red, blue, green, orange, darkblue, lightgray. Use these when you want a basic color and do not need precision. Most browsers recognize over 140 named colors.

Hex codes start with a # and use six characters: #FF5733, #0000FF, #FF0000. Hex gives you exact control over the shade. You can find hex codes for any color using an online color picker tool. Hex is the most common format used by web designers.

RGB values use three numbers between 0 and 255: rgb(255, 87, 51). The three numbers represent red, green, and blue intensity. RGB is useful if you are working with a designer who gives you RGB values, but hex is more common in HTML and CSS.

Mistakes to avoid when changing link colors

Do not forget the colon in selectors like a:hover and a:visited. Without it, the style will not work. Also make sure your opening and closing tags match: every <style> needs a </style>, and every { needs a }. Mismatched brackets are one of the most common reasons styles fail silently.

Avoid making links so light or so similar to your background that readers cannot see them. A link that blends into the page defeats its purpose. Test your colors on the actual background you are using. Also remember that some readers are colorblind, so do not rely on color alone to show that something is a link — underlines or other visual markers help too.

Frequently Asked Questions

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

Yes. Add style="color: red;" directly to that link's <a> tag. This overrides any style block you have written. For example: <a href="page.html" style="color: red;">Click here</a>.

What is the difference between a:link and a:visited?

a:link styles links the reader has not clicked yet. a:visited styles links they have already visited. Browsers remember visited links in the browser history, so use a:visited to show readers which pages they have already seen.

Why is my link color not changing?

Check that your style block is inside the <head> section, not the body. Also make sure you closed all your brackets and braces. If you used a hex code, verify it starts with # and has six characters. If a style attribute on the link itself exists, it overrides the style block, so remove it.

Can I change the underline color of a link separately from the text color?

Yes, but it requires the text-decoration-color property. For example: a { color: blue; text-decoration-color: red; } makes the text blue and the underline red. Not all browsers support this equally, so test it in the browsers your readers use.