What's default HTML/CSS link color?
When you add a hyperlink using HTML, what color does it appear by default, and why? Learn how browsers handle link styling and how to customize it using CSS for a better user experience.
By default, web browsers apply specific colors to hyperlinks in HTML to help users identify clickable elements. These default colors are part of the browser’s user-agent stylesheet, which is built-in styling applied when no custom CSS is provided.
Default Link Colors in HTML/CSS:
- Unvisited links () appear blue.
- Visited links turn purple.
- Active links (clicked and held) often appear red.
- Hovered links may remain blue or show a slight change, depending on the browser.
These colors serve a usability purpose — users can visually differentiate between new, previously visited, or currently clicked links.
Customizing Link Colors with CSS:
If you want to change the default appearance, CSS gives you complete control using pseudo-classes:
a:link {
color: #1a73e8; /* unvisited */
}
a:visited {
color: #6a1b9a; /* visited */
}
a:hover {
color: #d32f2f; /* hover */
}
a:active {
color: #f57c00; /* active */
}Key Tips:
- Always use a:link and a:visited before a:hover and a:active to maintain correct styling behavior (known as the LVHA order).
- Consider accessibility — ensure your link colors provide sufficient contrast and are easily distinguishable.
In summary, while browsers apply default styling, customizing link colors with CSS ensures consistency with your site’s theme and improves readability and user experience.