CancelImage Upload

How to style HTML links and give them mouseover effects with CSS

If you are looking to style the links on your website with CSS congratulations! You are taking one big step towards producing professional web designs. With the help of CSS you will be able to provide your links not only with color and specified font styles, but most important of all with mouseover hover effects. One of the most important elements of a professional web design!

Additionally to being styled, a link can be styled in four extra states, one of which (you'll never guess which one) enables the mouseover effect: link, visited, active and hover. The last of course being the attribute that produces the often desired hover effect.

Here then is how these 5 states can each receive their corresponding styles. I will assume that you are familiar with some of the basic CSS styles such as color, font, font-weight and text-decoration. If you are not familiar don't worry. As the names indicate these styles pretty much explain them, and any experimenting with the code should answer remaining questions:

<style type="text/css">
<!--

a {
color:#333;
font: 10pt verdana;
line-height:13pt;
font-weight:bold;
padding-bottom:8px;
text-decoration: underline;
}

a:link{
color:#333;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}

a:visited{
color:#333;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}

a:active{
color:#0032EA;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}

a:hover{
color:#0032EA;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}

-->
</style>

Now the code above would address every link on the website which has not been specified to be styled otherwise. To specifically delegate an alternative style to a link we can use either id or classes as the following example displays:

<html>
<head>
<title>How to style links with CSS</title>
<style type="text/css">
<!--

a {
color:#333;
font: 10pt verdana;
line-height:13pt;
font-weight:bold;
text-decoration: underline;
}

a:link{
color:#333;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}



a:visited{
color:#333;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}



a:active{
color:#0032EA;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}



a:hover{
color:#FF6622;
font: 10pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: underline;
}

a.linkClass1 {
color:#FF6622;
font: 8pt verdana;
line-height:13pt;
font-weight:bold;
text-decoration: none;
}

a.linkClass1:link{
color:#FF6622;
font: 8pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a.linkClass1.linkClass1:visited{
color:#FF6622;
font: 8pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a.linkClass1:active{
color:#0032EA;
font: 8pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a.linkClass1:hover{
color:#0032EA;
font: 8pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}


a#linkId1 {
color:#FF7777;
font: 7pt verdana;
line-height:13pt;
font-weight:bold;
text-decoration: none;
}

a#linkId1:link{
color:#FF7777;
font: 7pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a#linkId1.linkClass1:visited{
color:#FF7777;
font: 7pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a#linkId1:active{
color:#FF7777;
font: 7pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}



a#linkId1:hover{
color:#FF0000;
font: 7pt verdana;
line-height13pt;
font-weight:bold;
text-decoration: none;
}

-->
</style>

</head>
<body>

<a href="http://www.link1.com">www.link1.com</a><br>
<br>
<a href="http://www.link2.com" class="linkClass1">www.link2.com</a><br>
<br>
<a href="http://www.link3.com" id="linkId1">www.link3.com</a>

</body>
</html>

As you can see from the above example the ID linkId1 is addressed through a#linkId1, the key being the #. For classes we use a dot instead of the #: a.linkClass1. Naturally your classes can be given pretty much any name within reason. Title a hrefs for instance could receive the id title, links within your navigation could be part of the class navigation, and so on.

The difference between classes and IDs

Even though we have now pretty much covered all that there is to know about links, you should still bare in mind that classes and IDs have a difference that could be of consequence if ignored. While multiple links can use a class, only one HTML element per page should make use of an ID. This is because IDs are supposed to be unique by nature, allowing script languages such as JavaScript to access and manipulate them!

Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com