How to change link color in CSS

To change the link color in CSS, you can use the color property to set the desired color for the link. The color property applies to all types of links, such as anchor (<a>) tags, visited links, and active links. Here’s an example:

HTML:

<p>
  This is a <a href="#">link</a> in a paragraph.
</p>

CSS:

a {
  color: #007bff; /* Replace with your desired color */
}

In this example, we target all anchor (<a>) tags with the a selector in CSS. We then use the color property to change the color of the link text to a specific color. In this case, the color is set to “#007bff,” which is a shade of blue.

You can use any valid CSS color value for the color property, such as color names, hexadecimal values, RGB values, or HSL values, to customize the link color according to your design preferences.

It’s worth noting that different states of links, such as visited (:visited) and active (:active), can have different styles. By using pseudo-classes like :visited and :active, you can define different colors for these states:

a {
  color: #007bff; /* Normal link color */
}

a:visited {
  color: #800080; /* Visited link color */
}

a:hover {
  color: #ff0000; /* Link color on hover */
}

a:active {
  color: #00ff00; /* Link color when clicked */
}

By using the :visited, :hover, and :active pseudo-classes, you can apply specific styles to links depending on their state, enhancing the user experience and providing visual feedback as users interact with your website.