CSS Links

CSS Links

Applying CSS to your links allows you to do all sorts of nice roll-over effects and advanced text highlighting. You will also be able to have many sets of links on a single page, all with different formatting.

CSS Links: States

The four links states are:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: pink;
}

/* selected link */
a:active {
    color: blue;
}
</style>
</head>
<body>
<p><b><a href="#">This is a link</a></b></p>
</body>
</html>
Try it with the Editor

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

CSS Links: Background Color

The background-color property can be used to specify a background color for links.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: yellow;
}
a:visited {
    background-color: cyan;
}
a:hover {
    background-color: lightgreen;
}
a:active {
    background-color: hotpink;
} 
</style>
</head>
<body>
<p><b><a href="#">This is a link</a></b></p>
</body>
</html>
Try it with the Editor

CSS Links: Buttons

we combine several CSS properties to display links as boxes/buttons.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: red;
}
</style>
</head>
<body>
<a href="#">This is a link</a>
</body>
</html>
Try it with the Editor