Loading...

CSS Links

Links are how people move through your pages. In CSS you style the a element and its states — unvisited, visited, hovered, and active — so a link looks clickable, changes on interaction, and stays readable.

Link states at a glance

📊 Link states toolkit

State When it applies
a / a:link Default / unvisited link
a:visited Link the visitor has already opened
a:hover Pointer is over the link
a:active Link is being pressed (mousedown)
text-decoration Underline on or off — a common link control

Browsers often remember a helpful order nicknamed LVHA: :link, :visited, :hover, :active. Writing rules in that order keeps later states from being accidentally overridden.

Style the base link

Start with color and whether you want an underline. Many modern designs remove the default underline, then bring it back on hover.

Base link styles

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Visited links

:visited can shift color slightly so returning visitors notice familiar paths. Keep the change subtle — privacy limits what you can style on visited links.

Visited tone

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Hover feedback

:hover is your clearest everyday signal. A color shift, underline, or both tells people “this is interactive” without shouting.

Hover underline

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

Active — the press moment

:active fires while the link is pressed. A slightly darker tone gives a tiny “click” feeling.

Active press

css
CSS Code 
a:active {
color: #062e80;
}

A calm nav-link habit

Group the LVHA states, keep hover obvious, and do not wipe focus outlines just to look flat. Keyboard users need a visible focus cue.

Quiet nav links

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Try it yourself

  1. Set a base a color and text-decoration: none.
  2. Add a:visited with a slightly different color.
  3. On a:hover, underline and darken the color.
  4. Darken a bit more on a:active.
  5. Style nav a with LVHA order and keep a :focus-visible outline.

Common mistakes

  • Writing :hover before :link / :visited so some states never win
  • Removing underline and any other clue that the text is a link
  • Neon rainbow hovers on every word in a paragraph
  • outline: none on links with no replacement focus style
  • Mixing this lesson with text-shadow / ellipsis effects (previous session)

Summary

  • Style links with a and the states :link, :visited, :hover, :active
  • LVHA order helps cascade behave as you expect
  • Color + text-decoration are the everyday controls
  • Hover should feel clear; visited changes stay subtle
  • Keep a visible focus style for keyboard navigation

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 30 of 35
Css Tutorial