CSS link properties allow you to style HTML anchor tags (<a>), customizing colors, underlines, background buttons, and interactive state transitions when hovering or focusing.
Links support five distinct interactive state pseudo-classes:
/* 1. Unvisited link */
a:link { color: #38bdf8; text-decoration: none; }
/* 2. Visited link */
a:visited { color: #818cf8; }
/* 3. Mouse hover state */
a:hover { color: #60a5fa; text-decoration: underline; }
/* 4. Keyboard focus state */
a:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
/* 5. Mouse click active state */
a:active { color: #1d4ed8; }
The strict order rule for link states (LVHA):
:link → :visited → :hover → :active (Remember: Love Virtual Hate All).flowchart TD
A["Link Pseudo-Class Order (LVHA Rule)"] --> B[":link (Default unvisited link)"]
B --> C[":visited (Visited URL history link)"]
C --> D[":hover (Mouse pointer hovering over link)"]
D --> E[":active (Mouse button currently pressed down)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Links Demonstration</title>
<style>
.nav-link {
color: #94a3b8;
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover {
color: #38bdf8;
background-color: #1e293b;
}
.nav-link:focus-visible {
outline: 2px solid #38bdf8;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Styled Navigation Link</h2>
<a href="#" class="nav-link">Documentation Docs ↗</a>
</body>
</html>
:link, :visited, :hover, :active in exact sequence so hover styles override unvisited states.transition: color 0.2s ease for polished UI interactive feel.Write CSS rules for .link setting :link color to #38bdf8 and :hover color to #34d399 with text-decoration: underline!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.