Styling Links with CSS

Links can be styled differently based on their state. CSS provides pseudo-classes for link, visited, hover, active, and focus states.

Link States

:link targets unvisited links.

:visited targets visited links.

:hover applies when mouse hovers over the link.

:active applies when the link is being clicked.

Order matters: LVHA (link, visited, hover, active) to avoid conflicts.

/* Link styles (LVHA order) */
a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: darkred;
}