Skip to content
Related Articles

Related Articles

Improve Article

How to change link color in CSS ?

  • Last Updated : 20 Jun, 2021
Geek Week

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :