What's default HTML/CSS link color?

Understanding Default HTML/CSS Link Colors

Explore the default styling of hyperlinks in web browsers, how they change with user interaction, and how to customize them using CSS.

When you create a hyperlink on a webpage using the HTML <a> tag, browsers apply a default set of styles to it. These styles are part of the browser's user agent stylesheet, which provides basic rendering for all HTML elements. Understanding these defaults is crucial for consistent web design and effective styling.

The Four States of a Hyperlink

A hyperlink isn't just one color; it has four distinct states, each with its own default styling. These states are designed to provide visual feedback to the user about their interaction with the link. The order in which these states are typically defined in CSS (using the 'LVHA' rule: Link, Visited, Hover, Active) is important to ensure proper cascading and avoid unexpected behavior.

stateDiagram-v2
    [*] --> Unvisited: Initial state
    Unvisited --> Visited: User clicks link
    Unvisited --> Hover: User hovers over link
    Hover --> Active: User clicks while hovering
    Visited --> Hover: User hovers over visited link
    Visited --> Active: User clicks visited link
    Active --> Unvisited: User releases click (if not visited)
    Active --> Visited: User releases click (if visited)

State diagram illustrating the lifecycle of a hyperlink

Let's break down each state and its typical default appearance:

Default Browser Styles

Different browsers might have slight variations, but the general defaults are widely consistent. These styles are applied unless explicitly overridden by your CSS.

/* Default browser styles (conceptual) */
a:link {
  color: #0000EE; /* Blue */
  text-decoration: underline;
}

a:visited {
  color: #551A8B; /* Purple */
  text-decoration: underline;
}

a:hover {
  color: #EE0000; /* Red */
  text-decoration: underline;
}

a:active {
  color: #EE0000; /* Red */
  text-decoration: underline;
}

Conceptual CSS representing typical browser default link styles.

Customizing Link Styles with CSS

To change the default appearance of links, you use CSS pseudo-classes. It's good practice to define styles for all four states to ensure a consistent user experience. Remember the LVHA order for your CSS rules to ensure proper specificity.

/* Custom link styles */
a:link {
  color: #007bff; /* Bootstrap primary blue */
  text-decoration: none;
}

a:visited {
  color: #6610f2; /* A slightly darker purple */
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #004085;
}

/* Example of removing underline from all states */
.no-underline a {
  text-decoration: none;
}

/* Example of adding underline only on hover */
.hover-underline a:hover {
  text-decoration: underline;
}

CSS examples for customizing hyperlink styles.