CSS Link Styling Tutorial, Pseudo-classes with Examples for Beginners

CSS Links

In web design, CSS links can be styled to enhance usability and aesthetics. CSS provides pseudo-classes like :link, :visited, :hover, and :active to control the behavior and appearance of links during different states.

1. Unvisited Links - :link

Use the a:link selector to style links that haven’t been visited yet.

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

This makes unvisited links bold, blue and without underlines.

2. Visited Links - :visited

Browsers limit styling of visited links to protect user privacy. You can only apply safe styles like color or text-decoration.

a:visited {
  text-decoration: line-through;
}

This will display a strikethrough on visited links.

3. Hover State - :hover

Add effects when the user hovers the mouse over the link:

a:hover {
  color: red;
}

When you move your cursor over the link, the text color changes to red.

4. Active State - :active

The :active pseudo-class styles the link while it is being clicked.

a:active {
  background-color: yellow;
}

Set Link Color ( All States)

You can set specific colors for different link states using CSS.

Example: Set Color of Unvisited Link


<!DOCTYPE html>
<html>

<head>
  <style>
    a:link {
      color: #000000;
    }
  </style>
</head>

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

</html>

Output:

Example: Set Color of Visited Link

<!DOCTYPE html>
<html>

<head>
  <style>
    a:visited {
      color: #006600;
    }
  </style>
</head>

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

</html>

Output:

Example: Change Color on Hover


<!DOCTYPE html>
<html>

<head>
  <style>
    a:hover {
      color: #FFCC00;
    }
  </style>
</head>

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

</html>

Output:

Example: Change Color on Active


<!DOCTYPE html>
<html>

<head>
  <style>
    a:active {
      color: #FF00CC;
    }
  </style>
</head>

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

</html>

Output:

Tips

Always use pseudo-classes in the order: link, visited, hover, active - known as LVHA rule.
Not all styles apply to :visited for privacy reasons.
Use :hover and :active to create interactive feedback for users.