Link Colors and States

Browsers style links with default colours: blue for unvisited, purple for visited, and red while active (being clicked). These defaults can be overridden with CSS using the :link, :visited, :hover, and :active pseudo-classes.

Styling Links with CSS

The order of pseudo-classes matters — remember the mnemonic LoVe HAte: :link, :visited, :hover, :active. Defining them in any other order can cause styles to be overridden unexpectedly. You can also remove the underline with text-decoration: none, but ensure links remain visually distinguishable from regular text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Link Colors</title>
  <style>
    /* LoVe HAte order */
    a:link    { color: #0066cc; text-decoration: none; }
    a:visited { color: #551a8b; }
    a:hover   { color: #ff4400; text-decoration: underline; }
    a:active  { color: #ff0000; }

    /* Custom button-style link */
    .btn {
      display: inline-block;
      padding: 8px 16px;
      background: #0066cc;
      color: white;
      border-radius: 4px;
    }
    .btn:hover { background: #004499; color: white; }
  </style>
</head>
<body>
  <p><a href="#">Normal link</a></p>
  <p><a href="#" class="btn">Button Link</a></p>
</body>
</html>

HTML

Full Editor

Pro Tip

Never rely solely on color to distinguish links from plain text — at least 1 in 12 men has some form of color vision deficiency. Combine color with an underline, bold weight, or icon to ensure all users can identify links.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned