Open In App

How to change link color in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In HTML hyperlinks are added into the webpage by using the anchor tag <a>Name</a>. It creates the link navigate to another webpage from the current webpage. 

The default HTML links are in blue color and when mouse hovered they get an underline. When the link is visited, it becomes violet. These default properties can be changed and can be customized by using different CSS properties.

Example 1: Create a basic customization of HTML link using CSS selector. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
     <style>        
        h1 {
            color: #006600;
            text-align: center;
        }
        a{
            color:#006600;
            text-decoration: none;
        }        
    </style>
</head>
  
<body>
    <center>
    <h1>GeeksforGeeks</h1>
      Click me, I am a href link
    </a>
    </center>    
</body>
</html>


Output:

The links can be further customized based on the state.

The links basically have 4 states.

Example 2: We can give different color to the links on change of their states.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <style>
        h1 {
            color: #006600;
            text-align: center;
        }
  
        /* If the link is unvisited you see this color*/
        a:link {
            color: #006600;
            text-decoration: none;
        }
  
        /* If the link is visited you see this color*/
        a:visited {
            color: rgb(255, 105, 223);
        }
  
        /* On placing mouse over the link */
        a:hover {
            color: rgb(128, 105, 255);
            text-decoration: underline;
        }
  
        /* If the click the link,  you see this color*/
        a:active {
            color: rgb(255, 105, 138);
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p>Click the links</p>
  
    <ul>
        <li><a href=
           DBMS
        </a>
        </li>
        <li><a href=
          Computer Networks</a>
        </li>
        <li> <a href=
          Operating Systems</a>
        </li>
        <li><a href=
          Data Structures</a>
        </li>
        <li><a href="https://www.geeksforgeeks.org/"
           And many more</a>
        </li>
    </ul>
</body>
  
</html>


Output: The unvisited and visited links have different colors. On placing the mouse over the second link, we see the change in color and style of the link. The order for placing a: hover must be after a: link and a: visited. The style a: active should come after a: hover.

Example 3: The links can be further styled by applying different CSS properties like background-colour, font-size, font-style, text-decoration and many.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <style>
        h1 {
            color: #006600;
            text-align: center;
        }
  
        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);
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p> Click these links</p>
  
    <ul>
        <li><a href=
          DBMS</a>
        </li>
        <li><a href=
          Computer Networks</a>
        </li>
        <li> <a href=
          Operating Systems</a>
        </li>
        <li><a href=
          Data Structures</a>
        </li>
        <li><a href=
"https://www.geeksforgeeks.org/">And many more</a
        </li>
    </ul>
</body>
  
</html>


Output:



Last Updated : 20 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads