Style CSS link

An anchor tag (<a>) is used to create a link in HTML.

By default, the anchor tag is displayed as blue color and when we hover over it, it turns a little darker and underlined. Example normal link without styling.

We can style links using CSS. We can change color, background color, font size, font family, font style, font weight, text decoration, text transform, text-shadow, cursor, etc.

Let's look at how to style links using CSS.

Styling links using CSS

To style links, we use a selector or add a CSS class to the anchor tag.

Here is an example.

a {
  color: red;
  background-color: yellow;
  text-decoration: none;
}

a.link {
  color: white;
  background-color: indianred;
  padding: 0 5px;
}

Styling different states of links

There are four different states of links in CSS.

• a:hover - This is the state of the link when we hover over it.
• a:visited - This is the state of the link when it is visited.
• a:active - This is the state of the link when it is clicked.
• a:link - This is the default state of the link.

CSS also lets you style links based on the state of the link. For example, you can style the link when it is visited, when we hover over it, when it is clicked, etc.

1. Styling visited links

The a:visited specifies the state of the link when it is visited (when the user has clicked on it).

To style visited links, we use a:visited selector and add a style of your choice.

To show the link is visited generally the color of the link is changed.

a {
    color: red;
}

a:visited {
    color: green;
}

2. Styling links when we hover over it

To style links when we hover over them, we use a:hover selector and add a style of your choice.

To show the link is hovered over, generally, the mouse cursor is changed to a pointer, and the color of the link is changed.

a:hover {
  color:coral;
  text-decoration: none;
}

3. Styling links when it is clicked

To style links when it is clicked, we use a:active selector and add a style of your choice.

The a:active specifies the state of the link when the link is active (when the mouse is just clicked).

a:active {
    color:gold;
}