CSS Links – Styling Hyperlinks in CSS

CSS Links – Styling Hyperlinks in CSS

CSS allows you to style links (<a> tags) in different states, including normal, hover, active, and visited.

1. Basic Link Styling

a {
  color: blue;
  text-decoration: none;
  font-weight: bold;
}

✅ Removes the underline and sets the text color to blue.

2. Link States (Pseudo-classes)

You can style links in different states using these pseudo-classes:

/* Normal link */
a:link {
  color: blue;
}

/* Visited link */
a:visited {
  color: purple;
}

/* Hover (when mouse is over it) */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Active (when clicked) */
a:active {
  color: green;
}

🔹 Order of pseudo-classes (LVHA rule):
a:link → a:visited → a:hover → a:active

3. Button-Style Links

a.button {
  display: inline-block;
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

a.button:hover {
  background-color: #2980b9;
}

✅ This makes the link look like a button.

4. Removing Underline from Links

a {
  text-decoration: none;
}

✅ Removes the default underline.

5. Styling Navigation Links

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

nav a:hover {
  background-color: #444;
}

✅ Used for navigation menus.

6. Animated Hover Effect

a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: orange;
}

✅ Smooth color transition on hover.

Example Usage in HTML & CSS

<a href="#">Normal Link</a>
<a class="button" href="#">Styled Button</a>