6.0 Links

With CSS we can use the anchor tag <a> as a selector to which many of the properties that can be used on other elements can be applied. For example:

a 	{color: blue;}

Here the link will be blue. However, CSS offers several additional possibilities for styling links because a link can have different states, such as having been visited or not, whether a visitor is hovering over a link or not etc. These different states can be styled differently using pseudo classes:

StateDescription
a:linkUnvisitedThe link hasn't been clicked
a:visitedVisitedThe link has been clicked
a:hoverMouse over linkA cursor is hovering over the link
a:activeSelected linkA link becomes active once clicked

These must be specified in this order in a stylesheet.

These pseudo-classes can be used to assign different style effects to each of these states. There are limitless options for adding effects, such as changing colours, background colours, fonts, letter spacing, using text-transform etc. For example:

a:link		{color:blue;}

a:visited 	{color:red;}

a:active	{background-color:#ffff33;}

a:hover		{color:green;
		font-style: italic;}

Here the unvisited link would be blue, the visited link red, the active link background would turn yellow and when the cursor is hovering over the link it would turn green with an italic font. Try using the link below:

An example page link

The hover pseudo class lends itself to endless styling possibilities. A few more examples are:

a:hover		{letter-spacing: 10px;
		font-weight: bold;
		color: red;}

a:hover		{text-transform: uppercase;
		font-weight: bold;
		color: blue;
		background-color: yellow;}

Note that by default all links are underlined. This can be removed if required:

a	{text-decoration: none;}

We will cover more ground on pseudo classes later in this tutorial, as they can be applied to other elements too.