CSS · Chapter 14 of 44
CSS Links
Links can be styled based on their state using pseudo-classes: :link (unvisited), :visited, :hover (mouse over), and :active (being clicked).
The order matters: LVHA (link, visited, hover, active) ensures styles apply correctly due to CSS specificity rules.
Syntax
a:hover { }Link states
:link targets unvisited links, :visited targets visited ones, :hover applies during mouse-over, and :active applies while clicking.
LVHA order
Always declare these pseudo-classes in the order link, visited, hover, active, or later rules may not apply as expected.
Example 1 (css)
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }Output
Links change color depending on their stateEach pseudo-class styles the anchor differently based on user interaction.
Key points
- a:link styles unvisited links.
- a:visited styles previously visited links.
- a:hover styles a link on mouse-over.
- Always use the LVHA order for correct behavior.
💡 Note: text-decoration: none; is commonly used to remove default underlines from links.