CSS Tutorial
CSS Links
Style a:link, a:visited, a:hover, and a:focus. Order matters: LVHA, then focus.
Links have states
An <a href="..."> is not one look. The browser tracks whether the URL is unvisited, already opened, hovered, active (mouse down), or focused from the keyboard. CSS targets those moments with pseudo-classes on a.
| Selector | When it matches |
|---|---|
a:link | Unvisited URL |
a:visited | URL already in history |
a:hover | Pointer is over the link |
a:active | The link is being activated |
a:focus | The link is the keyboard focus target |
A rule like a { color: teal; } styles every state unless a more specific pseudo-class overrides it. Start with a base, then layer the states.
Order matters: LVHA, then focus
Pseudo-classes on links have the same specificity. When two match at once (hover on an unvisited link), source order decides. The classic order is LVHA — link, visited, hover, active — then :focus so a keyboard ring is not overwritten by hover or visited color.
Memory aid: LoVe HAte, then focus. If you put:link after :hover, an unvisited link never shows the hover color, because:link still matches and comes later.
Example
<style>
a:link {
color: teal;
}
a:visited {
color: #0f766e;
}
a:hover {
color: #0284c7;
}
a:active {
color: #0c4a6e;
}
a:focus {
outline: 3px solid #0284c7;
outline-offset: 2px;
}
</style>
<p><a href="/css/intro">CSS introduction</a></p>
<p><a href="/css/fonts">Harbor studio type chapter</a></p>Write the five rules in that order every time. Hover a Harbor studio link in/css/try, then Tab to it. You should see both the sky hover color and a focus ring.
Visited is limited on purpose
Browsers restrict which properties :visited may change — mainly color — so a page cannot snoop a visitor’s history by measuring layout. Do not expect :visited to swap a background image or hide a badge. A slightly deeper teal is enough to mark a chapter as already read.
Some browsers also ignore :link if you already styled a. Keeping the LVHA block complete still documents the intent and wins when a reset restyles bare a tags.
Hover and underline
Links are underlined by default so they look like links. If you remove the underline, keep another cue: color, weight, or a border that appears on hover. A teal sentence with no underline is not obviously clickable.
Example
<style>
a:link,
a:visited {
color: teal;
text-decoration: none;
border-bottom: 2px solid transparent;
}
a:hover {
color: #0284c7;
border-bottom-color: #0284c7;
}
a:active {
color: #0c4a6e;
}
a:focus {
outline: 3px solid #0284c7;
outline-offset: 2px;
}
</style>
<p>
Book a firing at
<a href="#book">Harbor studio</a>
on Harbor Street.
</p>Color alone is a weak cue for visitors who cannot tell teal from sky. Pair color with underline, weight, or that bottom border so the control still reads as a link.
Focus must stay visible
:hover never runs for someone who only uses a keyboard. :focus (and:focus-visible when you want to skip the ring after a mouse click) is the state that replaces hover for those visitors. Keep a 3-pixel outline or an equally obvious background.
Example
<style>
a:link {
color: teal;
}
a:visited {
color: #0f766e;
}
a:hover {
background: #e0f2fe;
}
a:active {
background: #ccfbf1;
}
a:focus {
outline: 3px solid #0284c7;
background: #e0f2fe;
}
</style>
<nav>
<a href="/css/text">Text</a>
·
<a href="/css/fonts">Fonts</a>
·
<a href="/css/lists">Harbor lists</a>
</nav>Next: lists. Nav bars are often lists of these same links, with the bullets turned off.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Engineering
LVHA, then focus
a:link, :visited, :hover, :active is the LVHA order. A:hover after :visited so hover still wins on a purple link. Put :focus where you can see it — often after hover.
Visited colour is a memory aid. Do not rely on it as the only difference; underline or a mark still helps.
Example
<style>
a { color: #0369a1; }
a:visited { color: #6d28d9; }
a:hover { color: #0f766e; }
a:focus { outline: 2px solid #0d9488; }
</style>
<p><a href="/css/intro">Open the CSS intro</a></p>Biology
A clinic link that stays underlined
Removing underlines looks clean and fails contrast-of-shape. Keep underline on body links. Nav bars may drop it if colour and spacing already mark the controls.
Example
<style>
a { color: #9f1239; text-decoration: underline; }
</style>
<p><a href="/css/forms">Book a slot</a></p>