HTML Link Colors

The Default Unvisited Link

The :link pseudo-class targets an anchor element that has not yet been visited by the user, and is the state most links are in by default.

Using :link instead of styling the anchor tag directly lets you target only unvisited links specifically, separate from visited ones.

Example: The Default Unvisited Link

In this preview, the link hasn't been visited, so it renders in the color set by a:link (blue by default) until it's clicked.

<style>
  a:link {
    color: blue;
  }
</style>
<a href="page.html">Unvisited link</a>

Marking Visited Links

:visited targets links the browser recognizes the user has already clicked before, letting you distinguish "read" links from "unread" ones, commonly used to gray out visited search results or wiki links.

Example: Marking Visited Links

This purple color only appears after a link has actually been clicked and visited — in a fresh preview like this one, the link still shows its unvisited (:link) color until you click it.

<style>
  a:visited {
    color: purple;
  }
</style>
<a href="page.html">Visited link</a>

Highlighting on Hover

:hover applies styles the moment a mouse pointer moves over a link, and disappears the instant the pointer moves away, giving users immediate visual feedback that an element is interactive before they even click it.

Example: Highlighting on Hover

<style>
  a:hover {
    color: red;
  }
</style>
<a href="page.html">Hover over me</a>

Styling the Active Click Moment

:active applies only during the brief moment a link is actively being pressed down, between mouse-down and mouse-up, giving tactile visual feedback that a click registered, similar to how a physical button visibly depresses when pushed.

Example: Styling the Active Click Moment

<style>
  a:active {
    color: orange;
  }
</style>
<a href="page.html">Click and hold me</a>

Custom Link Themes

Combining all four pseudo-classes lets you build a fully custom link theme that matches your site's design instead of relying on the browser's default blue-purple scheme, while still preserving the underlying behavioral feedback users expect from links.

Example: Custom Link Themes

<style>
  a:link { color: teal; }
  a:visited { color: gray; }
  a:hover { color: coral; }
  a:active { color: darkred; }
</style>
<a href="page.html">Themed link</a>