CSS Links

CSS Links

CSS links allow you to control how hyperlinks look and behave. You can style different link states to improve usability and visual feedback.

Link States

Links have different states that can be styled using pseudo-classes.

• a:link – normal, unvisited link
• a:visited – visited link
• a:hover – mouse over link
• a:active – active (clicked) link

a {
  color: #1f4bd8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

The recommended order for link states is: link, visited, hover, active.

Custom Link Styles

You can remove default underlines and add your own hover effects.

a.custom-link {
  color: #222;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

a.custom-link:hover {
  border-bottom-color: #1f4bd8;
}

Link Buttons

Links can be styled to look like buttons using CSS.

a.button {
  display: inline-block;
  padding: 10px 16px;
  background-color: #1f4bd8;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

Add a hover effect for better interaction:

a.button:hover {
  background-color: #1639a6;
}

Disabled Link Style

CSS can visually disable a link, but it does not prevent clicks without JavaScript.

a.disabled {
  color: #999;
  pointer-events: none;
  text-decoration: none;
}

Code Challenge

Goal: Style links for navigation and actions.

HTML:

<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="btn-link">Contact</a>

Task:

• Remove underline from navigation links
• Add a hover underline effect
• Style the contact link as a button
• Add spacing between links

Try a Solution:

.nav-link {
  color: #222;
  text-decoration: none;
  margin-right: 16px;
}

.nav-link:hover {
  text-decoration: underline;
  color: #1f4bd8;
}

.btn-link {
  display: inline-block;
  padding: 10px 18px;
  background: #1f4bd8;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.btn-link:hover {
  background: #1639a6;
}

What’s Next?

Next, you will learn how to style lists in CSS.