learn2kode.in

Menu

CSS Tutorial

Menu

CSS Links

CSS allows you to style hyperlinks (<a> tags) to change their color, remove underlines, adjust hover effects, and create interactive designs. Links have different states such as normal, visited, hover, and active. Using CSS, you can control the appearance of each state to improve user experience and navigation.

Default Link States in CSS

HTML links have four built-in states:

State Selector Description
Normal a:link A link that has not been clicked yet
Visited a:visited A link that has been visited
Hover a:hover When the user moves cursor over the link
Active a:active When the link is being clicked

Basic Link Styling Example

Copy Text 
a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}
Copy Text 
<a href="#">This is a styled link</a>

Removing Underlines

Copy Text 
a {
  text-decoration: none;
}

Custom Hover Effects

Copy Text 
a:hover {
  color: #ff6600;
  letter-spacing: 1px;
}

Visited Link Styling

Copy Text 
a:visited {
  color: purple;
}

Button-Style Links

Copy Text 
a.button {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

a.button:hover {
  background: #388E3C;
}

Transition Effects

Copy Text 
a {
  color: #333;
  transition: 0.3s ease;
}

a:hover {
  color: #ff0000;
}

Best Practices

  • Keep visited link colors recognizable for better user experience
  • Use hover effects to guide users
  • Avoid using too many bright colors
  • Make link text descriptive and meaningful (SEO-friendly)
CSS Colors