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. Inside the style attribute, use color: followed by the color you want. For example, <a href="page.html" style="color: red;">Click here</a> makes that single link red.
You can use color names (red, blue, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)). This method works when ready and overrides any other color rules on the page, but it only affects that one link — if you have many links to change, you will repeat the same code over and over.
Key Takeaways
- Add style="color: [color]" directly to an <a> tag to change one link's color.
- Use a <style> block in your HTML head to change all links at once, or target specific links with classes and IDs.
- Style all four link states separately — unvisited, visited, hover, and active — so users see feedback when they interact with links.
- Hex codes (#FF5733) and color names (red, blue) both work; choose whichever is easier for you to remember.
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. Inside it, write a { color: blue; } and replace "blue" with your chosen color. This rule applies to every <a> tag on the page without you having to edit each one.
This approach is cleaner than adding style attributes to dozens of links. If you later decide to change the color, you only edit the style block once and the change spreads across the whole page. The <style> block goes between the <head> and </head> tags, before your page content starts.
Style different link states — unvisited, visited, hover, and active
Links have four states, and you can color each one differently so users know what is happening. a:link is an unvisited link, a:visited is one the user has already clicked, a:hover is when the mouse is over it, and a:active is the moment the user clicks. Add all four to your style block like this:
a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: orange; }
Users expect visited links to look different — usually darker or a different hue — so they know where they have already been. The hover state gives feedback that the link is clickable. The active state (the split second during the click) is less noticeable but adds polish. If you do not define all four, the browser uses its defaults for the ones you skip.
Target specific links with a class or ID
When you want some links to be one color and other links to be another color, use a class or id attribute. Add class="button-link" to the links you want to style, then in your style block write .button-link { color: green; }. The period tells HTML you are targeting a class.
For example, if your navigation menu links should be white but your footer links should be gray, give the nav links class="nav-link" and the footer links class="footer-link", then style each class separately. An ID works the same way but uses a hash symbol: #special-link { color: gold; }. Use a class when multiple links share the same style, and an ID when only one link needs unique styling.
Use hex codes and RGB for precise colors
Color names like "red" and "blue" are straightforward but limited — there are only about 140 named colors. Hex codes give you millions of options. A hex code is a hash symbol followed by six characters: #FF5733 is a shade of orange. The first two characters control red, the next two control green, and the last two control blue. #000000 is black, #FFFFFF is white, and #FF0000 is pure red.
RGB values work the same way but use numbers from 0 to 255 instead: rgb(255, 87, 51) is the same orange as #FF5733. Use whichever format feels natural to you — a color picker tool (search "hex color picker" online) shows you the hex code and RGB value for any color you click on. Copy the code into your style block and you are done.
Common mistakes to avoid
The most common error is forgetting the colon after "color" — color red does not work, but color: red does. Another mistake is putting the style block in the wrong place; it must go inside the <head> section, not in the body where your content is. If your link color does not change, check that you closed the curly braces { } properly and that there are no typos in the color name or hex code.
If a link color you set is being overridden by another rule, add !important after the color to force it: color: red !important;. This tells the browser to use this color no matter what other rules exist. Use it sparingly — it can make your code harder to manage later — but it solves conflicts when you are stuck.
Frequently Asked Questions
Can I change the color of a link without using style?
No, HTML alone cannot change link colors. You need CSS, which you add either in a style attribute on the tag itself or in a <style> block. CSS is the only way to control how links look.
What color should visited links be?
Visited links are traditionally purple or a darker shade of the unvisited link color, so users can see where they have already been. The exact shade is up to you, but make it noticeably different from the unvisited state so the distinction is clear.
How do I change link color in an external CSS file?
Write the same rules — a { color: blue; } — in a separate .css file, then link it in your HTML head with <link rel="stylesheet" href="styles.css">. This keeps your styling separate from your HTML and makes it easier to manage large projects.
Why is my link color not changing?
Check that your color value is spelled correctly and that you used a colon after "color". If the color still does not change, another rule on the page may be overriding it — try adding !important after the color value to force it, or check for conflicting styles in other style blocks or external files.
Can I use color names like "red" and "blue"?
Yes, color names work fine for common colors. HTML recognizes about 140 named colors including red, blue, green, orange, purple, and gray. For colors outside this list, use hex codes or RGB values instead.