Styling Links with CSS

By default browsers style link text in blue with an underline. You can give it a different style. Links can be styled differently depending on what state they are in.

There are four links states.

1. a:link - a normal link
2. a:visited - a link the user has visited
3. a:hover - a link when the user hovers mouse over it
4. a:active - a link the moment it is clicked

While setting the style for several link states, follow the same order. The a:hover must come after the a:link and the a:visited and the a:active must come after the a:hover.

You can make links change their appearance when the user hovers the mouse over them. This code bolds them and removes the underline when the user hovers.

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

You can change the appearance of links at the moment the user clicks. This code increases the font size.

a:active {
 font-size: 1.25em;
}

You can change the appearance of links that the user has already clicked. This code changes their color.

a:visited {
 color: pink;
}

Remove Underline from Links

The text-decoration property is mostly used to remove underlines from links.

a:link {
 text-decoration: none;
}

Link Buttons

Several CSS properties can be combined to display links as buttons or boxes. For example:

a:link, a:visited {
 background-color: #000088;
 color: white;
 padding: 14px 25px;
 text-align: center; 
 text-decoration: none;
 display: inline-block;
}

a:hover, a:active {
 background-color: #000066;
}

Link Styles

Most browsers default to blue for normal (not visited) links and red or purple for visited links. The problem with using two different colors for visited and not  visited links is that visitors may not remember which color applies to which type of link.

It is recommended using a color for normal links that contrasts with both the page’s background color and the text color. Then, for visited links, use a darker or lighter version of the same color that contrasts with the background.

For example, on a page with a white background and black text, you can use bright red for links and pale red for visited links. The brighter version stands out; the paler version is less distinctive, but still a link.

The link styles are set for the entire page, but links can be used for a variety of purposes. For example, links might be used for global navigation, in a list of article titles. It is a good idea to style links depending on their usage:

nav a {...}
nav a:link {...}
nav a:visited {...}

These styles would be applied only to links in the navigation element.