CSS Links

Styling CSS Links

Learn how to style hyperlinks using modern CSS techniques.

Links, defined by the <a> HTML tag, can be styled in numerous ways to enhance user experience and match your website’s design.

Fundamental Link Styling

You can apply almost any CSS property to links, including color, font-family, background-color, padding, display, and more.

/* Basic link color */
a {
  color: #007bff; /* A common blue color for links */
  text-decoration: none; /* Remove default underline */
}

/* Style on hover for visual feedback */
a:hover {
  color: #0056b3;
  text-decoration: underline; /* Add underline on hover */
}

Furthermore, links can be styled differently based on their state using pseudo-classes. These states reflect user interaction:

The Core Link States:

• :link - A normal link that the user has not yet visited.
• :visited - A link the user has previously visited.
• :hover - A link when the user’s mouse pointer is hovering over it.
• :focus - A link that has received focus, typically via keyboard navigation (e.g., using the Tab key). Important for accessibility.
• :focus-visible - A link that has received focus and the browser determines focus styling is appropriate (often skips focus styles for mouse clicks but shows them for keyboard navigation). Provides a better user experience.
• :active - A link the moment it is being clicked or activated.

/* Unvisited link */
a:link {
  color: #1a0dab; /* Example: Google blue */
}

/* Visited link */
a:visited {
  color: #681da8; /* Example: Google purple */
}

/* Link receiving focus (keyboard) */
a:focus-visible {
  outline: 2px solid #007bff; /* Add a distinct outline for accessibility */
  outline-offset: 2px;
}

/* Mouse hovering over link */
a:hover {
  color: #f00; /* Red on hover */
  text-decoration: underline;
}

/* Link being clicked */
a:active {
  color: #f00; /* Red when active */
}

Order Matters: When defining styles for these link states, the order in your CSS is crucial due to CSS specificity rules. A commonly recommended order is Link, Visited, Focus, Focus-Visible, Hover, Active (LVF(V)HA). This ensures that :hover styles override :link and :visited, and :active styles override :hover.

• :hover should come after :link and :visited.
• :focus and :focus-visible should ideally come after :link and :visited but before :hover and :active.
• :active should come after :hover.

Tip: For accessibility, ensure sufficient color contrast between link text and background, and always provide clear visual cues for the :focus or :focus-visible state.

Common Link Styling Techniques

Beyond changing colors, here are other common ways to style links:

Text Decoration

The text-decoration property is frequently used to remove the default underline from links and perhaps add it back on hover or focus for visual feedback.

a:link,
a:visited {
  text-decoration: none; /* Remove underline from default and visited states */
}

a:hover,
a:focus-visible {
  text-decoration: underline; /* Add underline on hover and keyboard focus */
}

/* Active state doesn't usually need a different text-decoration, inherits from hover/focus */
a:active {
  text-decoration: underline;
}

Background Color

You can change the background-color of links, often combined with padding to create button-like appearances.

a {
  display: inline-block; /* Needed for padding to work correctly */
  padding: 8px 12px;
  border-radius: 4px; /* Optional: rounded corners */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transition */
}

a:link,
a:visited {
  background-color: #e0e0e0;
  color: #333;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  outline: none; /* Custom focus style handled by background/color change */
}

a:active {
  background-color: #0056b3;
  color: #fff;
}

Practical Application: Styling Navigation Menus

These link styling techniques are fundamental for creating interactive navigation bars, buttons, and inline text links throughout a web application.

Advanced Example Idea: Creating Button-Styled Links

Combine properties like background-color, color, padding, border-radius, text-align, display: inline-block;, and transitions to make links look and feel like interactive buttons.

Explore further CSS properties to create unique and effective link styles.