The Three Ways to Change Link Color
You change link color in HTML by writing CSS rules that target the <a> tag. The simplest method is to add a style attribute directly to individual links. A more practical approach is to write CSS rules in a <style> block in your page's <head> section. The most flexible method is to write those rules in a separate CSS file and link it to your HTML page.
All three methods work the same way underneath: you use the CSS property color to set the text color of the link, and you use pseudo-classes like :hover and :visited to change the color when someone hovers over the link or has already clicked it. Most websites use the third method because it keeps your styling separate from your HTML and makes it easier to change colors across many pages at once.
Key Takeaways
- The inline method uses a style attribute on a single link and works when ready, but only changes that one link.
- The style block method lets you write one rule that changes all links on a page, and you can use pseudo-classes to set different colors for unvisited links, hovered links, and visited links.
- The external CSS file method is the standard for real websites because one file can control link colors across dozens of pages.
- The color property takes hex codes like #0066cc, color names like blue, or RGB values like rgb(0, 102, 204).
- The :hover pseudo-class lets you change the color when someone moves their mouse over the link, which gives visual feedback that it is clickable.
Changing a Single Link with the Style Attribute
The fastest way to change one link's color is to add a style attribute directly inside the <a> tag. Open your HTML file and find the link you want to change. Inside the opening <a> tag, add style="color: #0066cc;" where #0066cc is the hex code for the color you want. The link text will turn that color when ready when you save and reload the page.
Here is a complete example:
<a href="https://example.com" style="color: #0066cc;">Click here</a>
This method works for one or two links, but if you have many links to change, you will end up typing the same style attribute over and over. That is when a style block becomes more practical.
Changing All Links on a Page with a Style Block
To change the color of every link on a single page, add a <style> block in the <head> section of your HTML file. Write a rule that targets the a selector. Inside the curly braces, set the color property to your chosen color.
Here is the basic structure:
<head> <style> a { color: #0066cc; } </style> </head>
Now every <a> tag on that page will be blue. If you want different colors for different link states, add more rules using pseudo-classes. The :link pseudo-class targets links that have not been visited. The :visited pseudo-class targets links the user has already clicked. The :hover pseudo-class targets links when the mouse is over them.
<style> a:link { color: #0066cc; } a:visited { color: #663399; } a:hover { color: #ff6600; } </style>
This code makes unvisited links blue, visited links purple, and links turn orange when you hover over them. The hover effect gives users visual feedback that the text is clickable.
Using an External CSS File for Multiple Pages
When you have many pages on your website, writing the same style block on every page wastes time and makes updates harder. Instead, create a separate CSS file and link it to all your HTML pages. This way, changing one color in one file updates the links on every page at once.
Create a new file called styles.css in the same folder as your HTML files. Inside it, write your link color rules:
a:link { color: #0066cc; } a:visited { color: #663399; } a:hover { color: #ff6600; }
Then, in the <head> section of each HTML page, add a <link> tag that points to this file:
<head> <link rel="stylesheet" href="styles.css"> </head>
Now all your pages will use the same link colors. If you want to change them later, you only edit styles.css once.
Choosing and Formatting Color Values
HTML and CSS accept colors in three main formats. Hex codes like #0066cc are the most common in professional websites. They start with a hash symbol followed by six characters that represent red, green, and blue values. Color names like blue, red, or purple are simpler but offer fewer choices. RGB values like rgb(0, 102, 204) use three numbers from 0 to 255 to set red, green, and blue intensity.
All three formats work in the color property:
a { color: #0066cc; } a { color: blue; } a { color: rgb(0, 102, 204); }
These three lines all produce the same blue color. Use whichever format you are most comfortable with. If you need to find specific hex codes, search for "hex color picker" in your browser — most tools let you click on a color and copy the hex code.
Common Mistakes and How to Avoid Them
The most common mistake is forgetting the hash symbol in hex codes. #0066cc works, but 0066cc without the hash does not. Another mistake is misspelling the color property — colour (British spelling) does not work in CSS; you must use color.
A third mistake is writing the style block in the wrong place. It must go in the <head> section, not in the <body>. If you put it in the body, the page may still work, but it is not the correct location and can cause unexpected behavior.
Finally, remember that pseudo-classes like :hover only work on interactive elements. They work on links, buttons, and form inputs, but not on plain text or images. If you want to change the color of something that is not a link, you need a different approach.
Frequently Asked Questions
Can I change the color of just one link without affecting the others?
Yes. Use the inline style method with a style attribute on that single link, or add a class name to that link and write a CSS rule for that class. The class method is cleaner if you have multiple links you want to style differently.
Why do my links stay purple even after I change the color?
Your browser is showing visited links in the default visited color. Make sure you have a rule for a:visited in your CSS and set the color you want. If you want visited links to be the same color as unvisited links, set both a:link and a:visited to the same color.
What is the difference between color and background-color?
The color property changes the text color of the link itself. The background-color property changes the color of the box behind the text. You can use both together to create a link with colored text on a colored background.
Do I need to use all four pseudo-classes?
No. You only need the ones that matter for your design. Many websites only set a:link and a:hover and leave :visited at the browser default. Use whichever ones help your users understand which links they have already clicked.
Can I change link colors in a style attribute without pseudo-classes?
Yes, but you cannot use pseudo-classes in an inline style attribute. The style attribute only changes that one link in that one state. If you want different colors for hover or visited, you must use a style block or external CSS file.