CSS Links

By default links come with a blue underlined style and change their color to purple once you've visited them. Not terribly exciting but thanks to CSS you can turn those bland looking anchor tags into cool links with all sorts of styles and effects.

CSS link states

Every link can be in one of the following 4 possible states:

• link is an unvisited link that has never been clicked before.
• visited is a link who's been used before.
• hover is any link that has the mouse hovering over it.
• active is a link that is being clicked or has been selected with the keyboard.

These states are also known as CSS pseudo classes and are not only limited to link tags as we'll see later in the CSS advanced tutorial. For now we'll concentrate on our links, though.

Note: these link states must be written in the above order in order to function properly. If you use hover before link it won't work.

Normal links

To style normal unvisited links you can apply styles to a:link. You're not just limited to colors. In fact, you can use any CSS property from borders to font sizes!

CSS a:link:

Display:

Above CSS code increases the link font size regardless of its state and makes it red if unvisited. If you click the link (which sends you to the contact page) and reload this page you'll find that the red color has gone because the link state has now changed to visited.

Visited links

Having a different style for visited links is very important for usability and will increase the user-friendliness of your website. Sadly there are many websites which don't make use of this handy feature.

Changing the style of a visited link is as simple as applying styles to a:visited. We're going to use a dark-red color to make our previous link distinguishable from non-visited ones.

CSS a:visited:

Display:

Hover links

By changing the a:hover property for when the mouse is over a link you can create some fancy effects. For example links lightening up by using a lighter color than the standard link color.

CSS a:hover:

Display:

Active links

Although the name may suggest it this link state is not for links pointing to the current page!

Instead it's for links that have received focus such as when being clicked or when using the tab key.

It can be changed using the a:active property. Usually it is set to the same as a:hover to avoid any funny style changes while the link is being clicked. Though it can make sense to style this state differently for better accessibility (e.g. people who can't use a mouse and need the tab key to navigate instead).

CSS a:active:

Display:

Link effects

Have you ever wondered how certain websites created their cool looking links? We're going to have a look at some of these popular link styling effects along with example code.

Fancy underlines

Surely you've seen them before, links with dashed or dotted underlines. The trick to achieve this kind of effect is to get rid of the standard underline altogether with text-decoration:none and use borders instead. Unlike standard underlines it's possible to have a different color than the link text. Check out the following examples (Note: to better showcase the link effects I didn't use different styles for visited and active links):

CSS link with colored underline:

Display:

CSS link with dashed underline and background:

Display:

Not just underlines

You're not limited to just underlines. Have a look at the following example which uses border-top to create an overline:

CSS link with underline and overline:

Display:

To take things even further the next example makes use of text-transform to render hovered link text in uppercase:

CSS link with uppercase effect:

Display: