How to change link color in CSS ? - GeeksforGeeks

20 Jun, 2021
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>    <a href = "https://practice.geeksforgeeks.org/home/">       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.
unvisited (a:link)
hover (a: hover)
visited (a: visited)
active (a: active)
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="https://www.geeksforgeeks.org/dbms/?ref=ghm">           DBMS        </a>        </li>        <li><a href="https://www.geeksforgeeks.org/computer-network-tutorials/?ref=ghm">          Computer Networks</a>        </li>        <li> <a href="https://www.geeksforgeeks.org/operating-systems/?ref=ghm">          Operating Systems</a>        </li>        <li><a href="https://www.geeksforgeeks.org/data-structures/?ref=ghm">          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="https://www.geeksforgeeks.org/dbms/?ref=ghm">          DBMS</a>        </li>        <li><a href="https://www.geeksforgeeks.org/computer-network-tutorials/?ref=ghm">          Computer Networks</a>        </li>        <li> <a href="https://www.geeksforgeeks.org/operating-systems/?ref=ghm">          Operating Systems</a>        </li>        <li><a href="https://www.geeksforgeeks.org/data-structures/?ref=ghm">          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.
CSS-Properties
CSS-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?