CSS Links

Styling HTML links is very simple.

You can do it with the same CSS properties that are used for styling text.

However, compared to plain text, you have a few more options when it comes to styling links.

There are four states of HTML links and we can apply different properties on each.

It’s important to maintain the order as it is below when defining styles in your stylesheet for link styling to work correctly.

 

1. Link State

The normal link state is the default state, when the link is simply displayed on the page and is ready to be clicked.

By simply using a:link{ you can specify the link state in your stylesheet.

Alternatively, since it’s the default state, simply writing a{ will work too.

Any styling that this basic link state gets filters down to your other link states.

Therefore, if you wish to keep everything the same for most or all of the link states, you can use this method for font colors and faces.

a:link {
font-size: 17px;
color: blue;
text-decoration: none;
}

Output With This Style:

HTML Guide

You might be wondering why we used the text-decoration: none line here.

This gets rid of the default underline that we see with all HTML links.

That being said, we need something to tell the user that our links are actual links rather than just plain text.

Links are usually blue and color and underlined as a standard way of being able to differentiate from other text on the page, so I would suggest to keep your styling close to that.

 

2. Visited State

The visited state of an HTML link tells the user that they have already been to the web page that the link connects to.

As a default, web browsers display such a link in a color that’s different from that of unclicked links.

However, we are free to apply any properties that we want:

a:visited {
color: green;
}

Output With This Style:

Click this link and come back it will be purple

 

3. Hover State

As the name suggests, the hover state occurs in an HTML link when a user hovers their mouse cursor over the link.

We recommend you to have your link change its appearance whenever the user hovers over it.

This is fairly effective to signal to the user that the link is clickable.

There are various ways a link can change its appearance, such as adding an underline and changing the font color. Here is an example:

a:hover {
font-size: 17px;
text-decoration: underline;
color: orange;
}

Output With This Style:

Hover over this

 

4. Active State

The fourth and the last HTML link state is the active state.

This state occurs momentarily when a user clicks on a link to show that something is happening.

Watch carefully as you click the link and you will see the line-through or strikethrough appear before the next page loads.

That being said, we can use any text styling that we want:

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

Watch for the line!

Remember, we can also use Box Model styling on our links and other HTML elements.

You can even create some fascinating effects, such as menus with buttons.