Open In App

How to Change Link Color in CSS?

Last Updated : 23 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The default HTML links are in blue color, and when the mouse hovers they get an underline. When the link is visited, it becomes violet.

Now, To change the color of a link in CSS, you can use the color property along with the <a> (anchor) tag and its various pseudo-classes like :hover, :visited, and :active to style different link states.

Simple Changing Color of Link

To change the link color, the CSS Color Property is used. Here, we will use inline CSS to add it to the anchor tag.

HTML 
<a href="https://www.geeksforgeeks.org/" style="color: green;">
	Visit GeeksforGeeks!
</a>

Output:

Change-Link-Color-CSS
output

The links can be further customized based on their states:

  • :link - This adds style to unvisited link.
  • :visited - This adds style to visited link.
  • :hover - This adds effects to a link when hovered.
  • :active - This is used to style an active element.

Below syntax changes the Link color in different states: 

a:link { color:  brown; }  
a:visited { color: red; }  
a:hover { color: green; }  
a:active { color: cyan; } 

Example: Here, we change the links color on changing the different links state.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Unvisited Link */
        a:link {
            color: #006600;
        }
        /* Visited Link */
        a:visited {
            color: #5f030f;
        }
        /* Mouse Over Link */
        a:hover {
            color: #2706e2;
            text-decoration: underline;
        }
        /* Click on Link */
        a:active {
            color: #078686;
        }
    </style>
</head>
<body style="text-align: center;">
    <h2>Change the Link Color</h2>
    <a href="https://www.geeksforgeeks.org"
        target="_blank">
        Visit GeeksforGeeks!
    </a>
</body>
</html>

Output: The unvisited and visited links have different colors. On placing the mouse over the link, it changes the link color. The order for placing a: hover must be after a: link and a: visited. The style a: active should come after a: hover.

Change-Link-Color
output

We can further style the links by applying different CSS properties like background-color, font-size, font-style, text-decoration and many in different states.

style.css 
a:link {
	color: #006600;
    text-decoration: none;
}
a:visited {
	color: rgb(255, 105, 223);
}
a:hover {
	color: white;
    text-decoration: underline;
    font-size: larger;
    font-style: italic;
    background-color: #006600;
}
a:active {
	color: rgb(255, 105, 138);
}

Next Article
How to specify the double border using CSS ?

L
lokeshpotta20
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox