CSS Styling Links

CSS Styling Links

CSS can change the appearance of HTML links and provide visual feedback as users interact with them.

Links can be styled with colors, text decoration, backgrounds, borders, spacing, and other CSS properties. CSS pseudo-classes also let you style links differently when they are unvisited, visited, hovered, focused, or activated.

Basic Link Styling

HTML links are created with the <a> element. CSS can style links using the a type selector or a class assigned to selected links.

a {
  color: #006699;
  text-decoration: underline;
}

This rule changes the text color while keeping the underline that visually identifies the text as a link.

A class can be used when only certain links should receive a particular style.

.special-link {
  color: darkgreen;
  font-weight: bold;
}

Link States

CSS pseudo-classes can style a link according to its current state.

The :link and :visited pseudo-classes specifically describe hyperlink states. The :hover, :focus, and :active pseudo-classes can also be used with many other interactive elements.

Link State Order

When link-state rules use selectors with equal specificity, their source order matters because more than one state can apply at the same time.

a:link {
  color: #006699;
}
a:visited {
  color: purple;
}
a:hover {
  color: darkred;
}
a:focus {
  outline: 2px solid #006699;
  outline-offset: 2px;
}
a:active {
  color: red;
}

A common order places :link before :visited, followed by the interactive states. Most importantly, place :hover after :link and :visited, and place :active after :hover when those rules set the same properties.

Hover State

The :hover pseudo-class changes a link while a pointing device is positioned over it.

a:hover {
  color: darkred;
  text-decoration-thickness: 2px;
}

Hover effects provide useful visual feedback for mouse and other pointing-device users, but important information or functionality should not depend on hover alone.

Focus State

Links can receive focus when users navigate with a keyboard or other input method. A visible focus indicator helps users identify which link is currently selected.

a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 3px;
}

The :focus-visible pseudo-class allows the browser to show the custom focus style when a visible focus indicator is appropriate, such as during keyboard navigation.

Avoid removing a browser's focus outline unless you provide another clearly visible focus indicator.

Active State

The :active pseudo-class applies while a link is being activated, such as during the brief period when a mouse button is pressed.

a:active {
  color: red;
}

The active state is temporary and can provide immediate visual feedback that the link is being activated.

Link Text Decoration

Browsers normally underline links, making them easier to distinguish from surrounding text. CSS can customize the underline without removing this useful visual cue.

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

The underline can also change during interaction.

a:hover {
  text-decoration-thickness: 2px;
}

If an underline is removed, use another clear visual treatment so links remain distinguishable from ordinary text. Relying only on a subtle color difference can make links difficult for some users to recognize.

Button-Style Links

A link can be visually styled to resemble a button by adding a background, padding, border, and other presentation properties.

.button-link {
  display: inline-block;
  padding: 10px 18px;
  color: white;
  background-color: #006699;
  text-decoration: none;
  border: 2px solid #006699;
}
.button-link:hover {
  color: white;
  background-color: #004d73;
  border-color: #004d73;
}

Changing a link's appearance does not change its meaning. Use a link for navigation to another page, document, or location. Use a <button> element for actions such as submitting a form or changing something on the current page.

Accessible Link Styling

Link styles should make links easy to recognize and provide visible feedback during interaction. Consider color contrast, underlines or other visual distinctions, hover feedback, and clearly visible keyboard focus styles.

Do not rely on color alone when the surrounding context does not otherwise make a link identifiable. Keeping or customizing the underline is a simple way to distinguish links within paragraphs and other text.

Visited-link styling can also help users recognize pages they have already opened, although browsers restrict some CSS properties that can be changed with :visited for privacy reasons.

Styling Links Example

The following example demonstrates a text link with interactive states and a separate button-style link. Open the example in the editor and change the colors, text decoration, outline, padding, or background values to see how each property affects the links.

.text-link:link {
  color: #006699;
}
.text-link:visited {
  color: purple;
}
.text-link:hover {
  color: darkred;
  text-decoration-thickness: 2px;
}
.text-link:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 3px;
}
.text-link:active {
  color: red;
}