How to apply different styles to links based on their state (visited, hover, active) in CSS

In CSS, you can apply different styles to links based on their state using pseudo-classes. The common states for links are :link (normal, unvisited links), :visited (visited links), :hover (when the mouse is over the link), and :active (when the link is being activated, such as when it's being clicked).

Here's an example of how you can style links for each state:

cssCopy code
/* Normal, unvisited link */
a:link {
  color: blue;
  text-decoration: none; /* Removes default underline */
}

/* Visited link */
a:visited {
  color: purple;
}

/* Hovered link */
a:hover {
  color: red;
  text-decoration: underline; /* Underline on hover */
}

/* Active link */
a:active {
  color: green;
}

In this example:

• The :link pseudo-class styles normal, unvisited links with a blue color and removes the default underline.
• The :visited pseudo-class styles visited links with a purple color.
• The :hover pseudo-class styles links when the mouse is over them, changing the color to red and adding an underline.
• The :active pseudo-class styles links when they are being activated (clicked), changing the color to green.

You can customize the styles based on your design preferences. Adjust the color, text-decoration, and other properties as needed.