Change link color with the CSS color property

The fastest way to change a link color is to add a style attribute directly to the <a> tag. Write style="color: blue;" inside the opening tag, replacing "blue" with any color name or hex code. This method works when ready and affects only that single link.

For example, <a href="page.html" style="color: red;">Click here</a> makes that link red. You can use color names (red, green, blue, purple), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)). The link text displays in your chosen color right away.

This approach is useful when you need one or two links to stand out, but it becomes repetitive if you have many links to style. Each link needs its own style attribute, and if you later want to change the color, you have to edit every single tag.

Key Takeaways

  • Add style="color: colorname;" directly inside the <a> tag to change a single link's color when ready.
  • Use a <style> block in your HTML head to change all links at once with the a { color: blue; } selector.
  • Target specific link states with a:hover, a:visited, and a:active to change color when users interact with the link.
  • Hex codes (#FF5733), color names (blue, red), and RGB values (rgb(255, 0, 0)) all work in the color property.
  • External CSS files keep your color rules organized and make updates faster when you have many links across multiple pages.

Use a style block to change all links at once

If you want every link on a page to be the same color, add a <style> block inside the <head> section of your HTML. Write a { color: blue; } and replace "blue" with your color choice. This single rule applies to every <a> tag on that page without needing individual style attributes.

The style block sits between <head> and </head>, before your page content. For example:

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

Now every link on that page turns purple. If you later decide links should be green instead, you change the color once in the style block and all links update automatically. This saves time compared to editing dozens of individual style attributes.

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

Links behave differently depending on what the user is doing. A visited link is one the user has already clicked. A hover link is one the user's mouse is currently over. An active link is one being clicked right now. You can set a different color for each state using a:visited, a:hover, and a:active in your style block.

For example:

a { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: orange; }

This code makes unvisited links blue, visited links purple, links turn red when you hover over them, and orange while being clicked. Users see the color change when ready as they interact with the page, which signals that the link is clickable and responds to their actions.

The hover state is especially useful because it gives visual feedback. Many websites use a darker shade or a different color on hover to show the link is interactive. The visited state helps users remember which pages they have already seen.

Use an external CSS file for multiple pages

If you have many HTML pages and want all of them to use the same link colors, create a separate CSS file instead of repeating the style block on every page. Save a file called styles.css with your link color rules inside it, then link to that file from each HTML page using a <link> tag in the head.

Inside styles.css, write:

a { color: blue; } a:visited { color: gray; } a:hover { color: darkblue; }

Then in each HTML file's head section, add:

<link rel="stylesheet" href="styles.css">

Now every page that links to styles.css uses the same link colors. If you want to change the color across your entire site, you edit styles.css once and the change appears on every page. This method is much faster than editing individual style blocks on dozens of pages.

Color options: names, hex codes, and RGB values

HTML and CSS accept three main ways to specify colors. Color names are the simplest: blue, red, green, purple, orange, and about 140 others. Type the name directly into the color property with no quotes.

Hex codes give you millions of color choices. They start with a # symbol followed by six characters, like #FF5733 or #0099CC. Hex codes let you pick exact shades. Many color picker tools online generate hex codes for you — search "hex color picker" and click on colors until you find the one you want, then copy the code.

RGB values use three numbers from 0 to 255 representing red, green, and blue light. For example, rgb(255, 0, 0) is pure red, and rgb(0, 0, 255) is pure blue. Write them as color: rgb(255, 0, 0); inside your style rule. All three methods work identically in the color property — choose whichever feels easiest to you.

Common mistakes and how to fix them

The most common error is forgetting the colon after "color" or the semicolon at the end. Write color: blue; not color blue or color: blue. The colon separates the property name from the value, and the semicolon ends the rule.

Another mistake is misspelling the color name. "Bule" and "blu" do not work — use the exact spelling. If you are unsure of a color name, use a hex code instead. Hex codes are more reliable because they are numbers, not words.

If a link color does not change, check that your style block is inside the <head> section, not in the body. Also make sure the <a> tag has an href attribute — a tag without href does not behave like a link and may not show the color you set.

Frequently Asked Questions

Can I change the color of just one word inside a link?

No, the color property colors the entire link text. If you need different colors for different words, you have to split them into separate links or use a <span> tag inside the link with its own style. For example, <a href="page.html"><span style="color: red;">Click</span> here</a> makes only the word "Click" red.

Why does my link color not show up?

The most common reason is that your style block is in the wrong place — it must be inside <head>, not in the body. Also check that you spelled the color name correctly and included both the colon and semicolon. If you are using a hex code, make sure it starts with # and has exactly six characters.

How do I make visited links a different color than unvisited links?

Use the a:visited selector in your style block. For example, a { color: blue; } for unvisited links and a:visited { color: gray; } for visited links. The browser automatically tracks which links the user has clicked and applies the visited color.

What is the difference between using style attributes and a style block?

Style attributes (style="color: blue;") explore to one link only and are useful for single exceptions. Style blocks explore to all links on a page and are faster when you have many links. External CSS files explore to all pages at once and are best for large websites.