CSS — Links

Links have four states

Pseudo-classes target each stage of a link's life:

a:link    { color: #2563eb; }   /* unvisited            */
a:visited { color: #7c3aed; }   /* already opened       */
a:hover   { color: #0d9488; }   /* mouse over           */
a:active  { color: #dc2626; }   /* being clicked        */

What the browser displays

(Fresh links blue, previously-visited purple, teal on hover, red flash on click.)

Order matters — memorize L-V-H-A ("LoVe HAte"):

:link → :visited → :hover → :active

Wrong order (e.g. :hover before :visited) and visited-hover rules cancel each other out mysteriously.

The underline decision

Underlines are the web's universal "this is text you can click". Removing them entirely from body-text links harms usability. The safe patterns:

/* Pattern 1: keep underline, restyle color */
article a {
    color: #0d9488;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;      /* breathing room below text */
}

/* Pattern 2: no underline at rest, appear on hover */
.nav a {
    text-decoration: none;
}
.nav a:hover {
    text-decoration: underline;
}

Rule of thumb: prose links stay underlined; clearly-button-like or menu links may drop them because context already signals clickability.

Button-style links

Navigation "buttons" are usually <a> tags dressed up:

.btn-link {
    display: inline-block;          /* padding now applies */
    padding: 10px 22px;
    background: #0d9488;
    color: white !important;        /* override state colors */
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.btn-link:hover {
    background: #0f766e;
}

<a class="btn-link" href="/signup">Start free trial</a>

(A teal pill that darkens on hover — indistinguishable from a native button, but navigates like a link.)

display: inline-block is the key unlock: plain inline <a> ignores padding/width.

Visited-link privacy

Browsers deliberately limit what :visited can change (color only — not layout, not content detection) to prevent sites from snooping your browsing history. Don't fight this; style visited color subtly.

Focus matters too

Keyboard users tab to links — give focus the same love as hover:

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

Mini Practice

1. Implement L-V-H-A in correct order with a custom palette
2. Style prose links vs nav links differently (underline policies)
3. Build .btn-link; verify all four states still look intentional
4. Add :focus-visible rings; tab through your page
5. Try the states in wrong order once — observe the hover bug you just created

Next: lists → (CSS list styling)