You will style links so they are readable, interactive, and accessible by controlling color, decoration, and state pseudo-classes.
What it is
Styling links means applying CSS to anchor elements and their states. A link is usually an <a> element with an href. CSS can change its appearance when it is unvisited, visited, hovered, focused, or active. The common mental model is: style the base link first, then add state rules for interaction.
Related terms include pseudo-classes such as :link, :visited, :hover, :focus, :focus-visible, and :active. Text decoration controls underlines, overlines, line-through, and thickness.
Why it matters
- Users need to recognize links quickly.
- Hover and focus feedback shows that an element is interactive.
- Good contrast helps people with low vision or color blindness.
- Consistent link styling supports navigation and forms.
- Accessible focus styles are required for keyboard users.
Syntax or steps
- Select the link element with
aor a class such as.nav-link. - Set base properties such as
color,text-decoration, andfont-weight. - Add state rules using pseudo-classes.
- Keep visited styling limited because browsers restrict some properties for privacy.
- Test with mouse, keyboard, and screen reader.
Example
/* Base link */
a {
color: #185FA5;
text-decoration: none;
font-weight: 500;
}
/* Visited links */
a:visited {
color: #5A3E85;
}
/* Hover feedback */
a:hover {
color: #0B3D66;
text-decoration: underline;
}
/* Keyboard focus */
a:focus-visible {
outline: 2px solid #185FA5;
outline-offset: 2px;
}
/* Active feedback */
a:active {
color: #072A47;
}Part-by-part explanation:
astyles every link. The base color is blue, and the underline is removed for a cleaner look.a:visitedchanges the color of links the user has already visited.a:hoveradds an underline and darkens the color when the pointer is over the link.a:focus-visibleshows an outline only when the browser determines focus should be visible, usually for keyboard navigation.a:activechanges the color while the link is being clicked.
Common mistakes
- Removing focus outlines with
outline: nonewithout replacing them. Fix: provide a visible:focus-visiblestyle. - Using only color to show a link. Fix: keep underlines or add icons, bold text, or other visual cues.
- Writing state rules in the wrong order. Fix: use the order
:link,:visited,:hover,:focus,:activewhen needed. - Expecting
:visitedto change many properties. Fix: limit visited styling to safe properties such as color.
When to use it
Use link state pseudo-classes for normal navigation links. Use classes when you need different link styles in different areas, such as buttons, cards, or menus.
| Approach | Best for | Example |
|---|---|---|
| Element selector | Site-wide default links | a { color: blue; } |
| Class selector | Special link styles | .button-link { ... } |
| Pseudo-class | Interaction states | a:hover { ... } |
Practice
Guided exercise: Create a link that is dark blue, has no underline, becomes underlined on hover, and shows a visible focus outline.
a {
color: #185FA5;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus-visible {
outline: 2px solid #185FA5;
outline-offset: 2px;
}Challenge: Add a visited color and an active color without breaking keyboard focus. Hint: place :visited after the base rule and keep :focus-visible visible.
Quick check
Question: Which pseudo-class should you use to style a link when a keyboard user tabs to it?
Answer: Use :focus-visible for modern browsers, or :focus if you need broader support and are careful not to remove the outline.
Summary
Styling links is about combining a clear base appearance with state feedback. Use color, decoration, and focus styles together so links are easy to see, easy to use, and accessible to everyone.