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.

Note: Style :link the same as the plain a selector unless you specifically want unvisited links to look different from visited ones.

Warning: :link only applies to anchors with an href attribute; a plain anchor tag used as a scroll target has no link state to style.

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.

Note: Use a slightly muted color for :visited links so users can tell at a glance which pages they have already explored.

Warning: Browsers deliberately restrict :visited to a small set of safe properties like color, to prevent a page from probing a user's browsing history.

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.

Note: Keep hover transitions short (100-200ms) so the color change feels responsive rather than sluggish.

Warning: :hover has no equivalent effect on touchscreens, since there is no mouse pointer to hover with, so never rely on it alone to convey critical information.

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.

Note: Give :active a noticeably different, punchier color than :hover so users feel a distinct "click confirmed" moment.

Warning: On touchscreens, :active often only flashes very briefly, so avoid making its styling carry information users need time to read.

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.

Note: Even when customizing colors fully, keep some form of visual distinction (like an underline) between links and plain text for accessibility.

Warning: A custom link theme that removes all color and underline differences from surrounding text can make links effectively invisible to users.

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>