BeingXpert Learn & Build Future

15. CSS Links

What you will learn

  • How to style the four link states
  • The correct order of link rules
  • How to make a link look like a button
  • How to keep links accessible

Link states

A link can be in different states, and each has a pseudo-class you can style.

Selector When it applies
a:link A link not yet visited
a:visited A link the visitor has already opened
a:hover The mouse is over the link
a:active The link is being clicked
a:focus-visible The link is selected with the keyboard

Example

<style>
  a:link { color: #0d6efd; }
  a:visited { color: #6f42c1; }
  a:hover { color: #082b59; text-decoration: none; }
  a:active { color: crimson; }
</style>

<p><a href="#">Hover over me</a></p>

Output

Remember LVHA: write the rules in the order Link, Visited, Hover, Active. If you change the order, later rules can override earlier ones and some states stop working.

For security reasons, browsers only let you change a small set of properties on :visited links, mainly colours.

Removing or adding underlines

Example

<style>
  a { text-decoration: none; color: #0d6efd; }
  a:hover { text-decoration: underline; }
</style>

<p><a href="#">Underline appears on hover</a></p>

Output

Links inside paragraphs of text should usually stay underlined, because colour alone is hard for some people to notice.

A link that looks like a button

Example

<style>
  a.btn {
    display: inline-block;
    padding: 10px 22px;
    color: white;
    background-color: #0d6efd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
  }
  a.btn:hover { background-color: #082b59; }
  a.btn:focus-visible { outline: 3px solid #0d6efd; outline-offset: 3px; }
</style>

<a class="btn" href="#">Start learning</a>

Output

display: inline-block lets the link have padding and a background that act like a real box.

Keyboard focus

Visitors who use the Tab key need to see which link is selected. Style :focus-visible with a clear outline, and never remove the outline without replacing it.

Common mistakes

  • Writing the rules in the wrong order, so hover or active never shows.
  • Removing the underline from every link in body text.
  • Removing the focus outline.
  • Link colours with poor contrast against the background.

Exercise

Make links dark blue (#082b59) with no underline, and show a red underline (text-decoration: underline red) on hover.

Show solution 
<style>
  a {
    color: #082b59;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline red;
  }
</style>
<p><a href="#">Style this link</a></p>

Knowledge check

1. What does LVHA stand for?

Link, Visited, Hover, Active, the correct order of link rules.

2. Which pseudo-class styles a link selected by keyboard?

:focus-visible

3. Which display value lets a link have padding and a background like a button?

inline-block

Summary

  • Style link states with :link, :visited, :hover, :active, and :focus-visible.
  • Keep the order Link, Visited, Hover, Active.
  • Keep links recognisable and keyboard friendly.
Scroll to Top