Styling HTML Links with CSS: A Complete Guide

Learn how to customize HTML link appearance using CSS. This tutorial covers styling unvisited, visited, hover, and active link states, creating button-like links, and provides examples with copyable code snippets. Master CSS link styling today!

Styling HTML Links with CSS

This chapter shows how to customize the appearance of HTML links using CSS, controlling their colors and styles for different states (unvisited, visited, active, hover).

Default Link Styles

Web browsers typically display links with default styles:

• Unvisited: Underlined and blue.
• Visited: Underlined and purple.
• Active (currently clicked): Underlined and red.

Customizing Link Styles with CSS

You can change these default styles using CSS. The CSS selectors a:link, a:visited, a:hover, and a:active target the different link states.

a:link {
  color: green;
  text-decoration: none;
}

a:visited {
  color: pink;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: yellow;
  text-decoration: underline;
}

Styling Links as Buttons

You can style links to look and behave like buttons using CSS. This can enhance the visual appeal and user interaction.

<a href="#" style="background-color:#4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;">This is a link</a>

For more advanced CSS styling, explore our CSS Tutorial.

Summary Table