Styling Links

CSS Styling Links

CSS can control the color, decoration, background, borders, and other visual properties of links. Pseudo-classes can also style links differently depending on whether they have been visited, pointed to, focused, or activated.

Basic Link Styles

An HTML link can be styled with many of the same CSS properties used for other text. The color and text-decoration properties are commonly used to control its basic appearance.

a {
  color: #0088cc;
  text-decoration: underline;
}

Links should remain visually distinguishable from surrounding text so visitors can recognize that they are interactive.

Link States

Links can have different interaction states. CSS pseudo-classes allow styles to be applied according to the current state of a link.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:focus {
  outline: 2px solid currentColor;
}

a:active {
  color: green;
}

These states can provide visual feedback as visitors interact with links using a mouse, keyboard, or other input method.

The :link Pseudo-Class

The :link pseudo-class selects links that have not yet been visited.

a:link {
  color: #0088cc;
}

It applies to unvisited hyperlinks rather than every <a> element.

The :visited Pseudo-Class

The :visited pseudo-class selects links whose destinations have been visited according to the browser's history.

a:visited {
  color: purple;
}

Browsers restrict which CSS properties can visibly change for visited links to protect a visitor's browsing privacy. Color is commonly used to distinguish visited links.

The :hover Pseudo-Class

The :hover pseudo-class applies while a pointing device is positioned over an element.

a:hover {
  color: #005580;
  text-decoration: none;
}

A hover style can provide useful feedback, but important information should not depend on hovering because touchscreens and other input methods may not provide the same interaction.

The :focus Pseudo-Class

The :focus pseudo-class applies when a link receives focus, such as when a keyboard user moves to it with the Tab key.

a:focus {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}

A visible focus indicator helps keyboard users identify which link is currently active for keyboard interaction. Avoid removing the browser's focus outline unless another clearly visible focus style replaces it.

The :active Pseudo-Class

The :active pseudo-class applies while a link is being activated, such as while a mouse button is pressed on it.

a:active {
  color: #cc0000;
}

The active state is usually brief, but it can provide immediate visual feedback during interaction.

Link State Order

When link-state rules have the same specificity, their order in the stylesheet can affect which declaration is displayed when more than one state applies. A traditional order is :link, :visited, :hover, and :active.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

A :focus rule can also be included so keyboard focus remains clearly visible. Keeping related link-state rules together makes their behavior easier to understand and maintain.

Link Text Decoration

Links are underlined by default in most browsers. CSS can change the underline's appearance or remove it when another clear visual treatment identifies the text as a link.

a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

Changing underline thickness or spacing can customize a link while preserving an important visual clue that the text is clickable.

Styling Links Like Buttons

A link can be given a button-like appearance when it performs a navigation action.

.button-link {
  display: inline-block;
  padding: 10px 18px;
  color: #ffffff;
  background-color: #0088cc;
  text-decoration: none;
  border: 2px solid #0088cc;
}

.button-link:hover {
  background-color: #006699;
  border-color: #006699;
}

The element remains a link semantically even though CSS changes its visual appearance. Use links for navigation to another location and buttons for actions performed on the current page.

Keeping Links Recognizable

Link styles should make links easy to distinguish from surrounding text. Color can help, but an underline or another visual indicator can make links easier to identify without relying on color alone.

Hover and focus states should also remain visible. A design that removes underlines, outlines, and other interaction indicators can make links difficult to recognize or use.

Try Styling Links

Edit the example to change the link colors, underline, background, and interaction states. Use the Tab key to move focus to the links and compare the focus, hover, and active styles.

Summary

CSS can change the color, decoration, background, borders, and other visual properties of links. The :link, :visited, :hover, :focus, and :active pseudo-classes provide styles for different link states. Links should remain visually recognizable, and keyboard focus should always have a clear visible indicator.

The next tutorial covers Styling Lists and explains how CSS controls list markers, spacing, and the appearance of ordered and unordered lists.