Webpage Workshop: Home » CSS » How to change links styles

How to change link styles

This tutorial will show you how to change the color and appearance of your links using Cascading Stylesheets.

The way that links are dealt with in CSS is quite different from most other elements, as links have several different states that we have to deal with: unvisited, visited, selected and hovered-over with the mouse. This means that we have to make use of pseudo-classes.

Unvisited links

The unvisited links are referenced using the link pseudo-class. This relates to the body attribute of the same name in HTML. The example below shows how we can create an unvisited link:

a:link {
    color: #7492b7;
    background-color: transparent;
}

Visited links

Visited links are referenced using the visited pseudo-class, and relate to the vlink body attribute in HTML. The example below shows how to use this:

a:visited {
    color: #7492b7;
    background-color: transparent;
}

Changing links on mouseover

Changing links when you move the mouse over them is something new to CSS that cannot be done using plain old HTML. It is achieved using the hover pseudo-class. The example below shows how to do this:

a:hover {
    color: #7492b7;
    background-color: transparent;
    text-decoration: none;
}

In the above example, notice the text-decoration: none;; This tells the browser to remove the underline on the link when you move the mouse of it. Also note that older browsers, specifically Netscape 4, do not support this pseudo-class.

Selected links

This is the state when a link is active, that is when the user has selected that link but the page has not yet loaded, and so the active pseudo-class is used. The example below shows this:

a:active {
    color: #7492b7;
    background-color: transparent;
}

Putting it all together

When defining your link styles in CSS it is important that you define them in a certain order so that the cascading effect of the stylesheet is maintained. This order is: link, visited, hover, and active. The example below shows a complete stylesheet for links:

a:link {
    color: #7492b7;
    background-color: transparent;
}

a:visited {
    color: #7492b7;
    background-color: transparent;
}

a:hover {
    color: #7492b7;
    background-color: transparent;
    text-decoration: none;
}

a:active {
    color: #7492b7;
    background-color: transparent;
}

Note that there are many other properties that can be set for your links that are not utilized in the above stylesheet. Any property that can be applied to regular text can also be applied to links, so why not experiment with them?