How to change link color in CSS?

CSS Web Development Front End Technology

A link, refers to the HTML anchor element, represented by the <a> tag. This element is used to create hyperlinks that allow users to navigate between web pages and other resources.

CSS (Cascading Style Sheets), is a powerful language used to control the visual presentation of web pages. One of the most important things we can do with CSS is changing the color of links on the webpage. In this article, we will cover different ways to change the color of links in CSS.

By using "a" selector

This is the basic way to change the color of links in CSS. This selector targets all links on a webpage. The color property is used to change the color of the text of the link. Here is an example −

a{
   color:blue;
}

Example

Here is an example to change the link color using “a” selector in CSS.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a{
         color:blue;
      }
   </style>
</head>
<body>
   <h2>Change the link color in CSS</h2>
   <a href = "https://www.tutorialspoint.com/">  link to tutorialspoint </a>
</body>
</html>

By using "id" and "class" selector

If we want to change the color of just specific links, we can use a class or ID selector. For example, if we have a class of "special-link" on some links, We will use the following code to change the color of those links this −

.special-link{
   color:blue; (By using class seletor)
}
#special-link{
   color:blue; (By using id seletor)
}

Example

Here is an example to change the link color using “ID” and “Class” selector in CSS.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      #special-link {
         color: red;
      }
      .special-link {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>

By using ":hover" pseudo-class

To change the color of a link when it is hovered over, we use the ":hover" pseudo-class. For example

a:hover {
   color: red;
}

This CSS will change the color of link to red when it is hovered over.

Example

Here is an example to change the link color using “.hover” pseudo-class in CSS.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a {
         color: blue;
      }
      a:hover {
         color: red;
      } 
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>

Conclusion

Changing the color of links in CSS is a simple and effective way to enhance the visual of the website. By using selectors, pseudo-classes, and properties, we can target specific links or link states and change their color to match the design.