CSS Styling Links

Just as you would style text on your web pages, styling documents is also a common practice. Links can be styled with CSS properties such as color, font-family, background, and more. A link element also has the ability to be in one of four states (pseudo-class). You can apply CSS to each state independently of each other.

The four links states are as follows:

a:link – state of an unvisited link by a user
a:visited – state when the user has visited the link
a:hover – state when the user hovers over it
a:active – state when the link is clicked

Link Color

You can easily apply different colors to the different states of your links. For example, you may want to apply a blue color for unvisited links, but apply red color for those links that have been visited by the same user.

a:link {
    color:#FF0000;
}
a:visited {
    color:#00FF00;
}
a:hover {
    color:#0000FF;
}
a:active {
    color:#FF00FF;
}

When applying CSS to the link element, it is important to have the CSS rules in the order shown in the example.

Text Decoration

Another property that can be used to style links is text-decoration. For example, browsers will, by default, style the links with an underline. You may only want to display the underline when the mouse hovers over the link. You can change that behavior by applying the text-decoration property.

a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:none;
}

Background Color

It is also common to apply a background color to your links. You can do this by applying the background-color property.

a:link {
    background-color:yellow;
}
a:visited {
    background-color:blue;
}
a:hover {
    background-color:green;
}
a:active {
    background-color:white;
}

You can apply other properties to links, just like you would to the text within your document. Here is an example of what can be done to style links by adding borders, fonts, etc.

a:link {
    text-decoration:none;
    color:#000000;
    background-color:#FFFFFF;
    border:2px solid blue;
    padding:5px;
}
a:visited {
    text-decoration:none;
    color:#000000;
    background-color:#FFFFFF;
    border:2px solid blue;
    padding:5px;
}
a:hover {
    text-decoration:underline;
    color:#FFFFFF;
    background-color:#000000;
    border:2px solid blue;
    padding:5px;
}
a:active {
    text-decoration:none;
    color:#000000;
    background-color:#FF0000;
    border:2px solid blue;
    padding:5px;
}