CSS Links

Default Link Styles

Browsers apply default styles to links:

Blue and underlined: :link — normal, unvisited links
Purple: :visited — links the user has already visited
Red: :active — links when clicked/activated

Example CSS for each state:

a:link {
  color: blue;
  text-decoration: underline;
  }

  a:visited {
  color: purple;
  }

  a:active {
  color: red;
  }

Note: :link, :visited, and :active are Pseudo Elements

Pseudo-classes for Links

Style different link states using pseudo-classes:

:link – Unvisited link
:visited – Visited link
:hover – When hovered
:active – While being clicked

a:hover {
  color: green;
}

Removing Underlines

To remove the underline from links, use:

a {
  text-decoration: none;
}

Adding Hover Effects

Enhance user experience with color or font changes on hover:

a:hover {
  color: red;
  font-weight: bold;
}

Transitions for Smooth Effects

Add smooth animations using transition:

a {
  color: navy;
  transition: color 0.3s ease;
}

a:hover {
  color: orange;
}

Practice Prompt

Create three links with the following behavior:

One with default browser styling
One with no underline and green on hover
One that smoothly transitions from black to orange

<a href="#">Default Link</a>

<a href="#" style={{
  textDecoration: "none",
  color: "black"
}} onMouseOver={(e) => e.currentTarget.style.color = "green"}
  onMouseOut={(e) => e.currentTarget.style.color = "black"}>
  Hover Styled Link
</a>

<a href="#" style={{
  color: "black",
  transition: "color 0.3s ease"
}} onMouseOver={(e) => e.currentTarget.style.color = "orange"}
  onMouseOut={(e) => e.currentTarget.style.color = "black"}>
  Smooth Transition Link
</a>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu