CSS Link Styles

Different links can have different styles.

Link Styles

Link styles can use any CSS property (such as color, font, background, etc.).

Specific links can have different styles depending on their state.

There are four link states:

a:link - A normal, unvisited link
a:visited - A link the user has visited
a:hover - A link when the user mouses over it
a:active - A link the moment it is clicked

Example

a:link {color:#000000;}      /* Unvisited link */
a:visited {color:#00FF00;}  /* Visited link */
a:hover {color:#FF00FF;}  /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link */

When setting the style for several link states, there are some order rules:

a:hover must come after a:link and a:visited
a:active must come after a:hover

Common Link Styles

Based on the color changes of the links above, you can see what state a link is in.

Let's go over some other common link styles:

Text Decoration

The text-decoration property is mainly used to remove the underline from links:

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

Background Color

The background-color property specifies the background color of links:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

More Examples

Adding Different Styles to Hyperlinks

This example demonstrates how to add different styles to hyperlinks, with five different style settings.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
    a.one:link {color:#ff0000;}
    a.one:visited {color:#0000ff;}
    a.one:hover {color:#ffcc00;}

    a.two:link {color:#ff0000;}
    a.two:visited {color:#0000ff;}
    a.two:hover {font-size:150%;}

    a.three:link {color:#ff0000;}
    a.three:visited {color:#0000ff;}
    a.three:hover {background:#66ff66;}

    a.four:link {color:#ff0000;}
    a.four:visited {color:#0000ff;}
    a.four:hover {font-family:Georgia, serif;}

    a.five:link {color:#ff0000;text-decoration:none;}
    a.five:visited {color:#0000ff;text-decoration:none;}
    a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
    <p>Move the mouse over the links to see the changes in style.</p>

    <p><b><a class="one" href="/css/" target="_blank">This link changes color</a></b></p>
    <p><b><a class="two" href="/css/" target="_blank">This link changes font size</a></b></p>
    <p><b><a class="three" href="/css/" target="_blank">This link changes background color</a></b></p>
    <p><b><a class="four" href="/css/" target="_blank">This link changes font type</a></b></p>
    <p><b><a class="five" href="/css/" target="_blank">This link changes text decoration</a></b></p>
</body>

</html>

Advanced - Creating Link Boxes

This example demonstrates a more advanced technique where we combine several CSS properties to display links as boxes that change color when hovered over or clicked.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
    a:link, a:visited {
        display: block;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        width: 120px;
        text-align: center;
        padding: 4px;
        text-decoration: none;
    }
    a:hover, a:active {
        background-color: #7A991A;
    }
</style>
</head>

<body>
    <a href="/css/" target="_blank">This is a link</a>
</body>
</html>