Menu

Downloads

Links



All About Links



How do I change the link properties?

Don't forget the start tags and end tags. All the codes on this page go in between these two tags!
Start Tag
<style type="text/css">
End Tag
</style>



When working with CSS and links, you are capable of defining a few more attributes than when using HTML. For instance, you can define what a link will look like normally, what it will look like when someone hovers over it, when it's active, and when it's been visited already. Don't forget that you can use any of the elements found in the 'text' menu when decorating your links!

Basic Link Attributes
To change the way a basic link will look, use this code.

a:link{color:#000000;font-weight:bold;font-size:10pt;font-family:verdana;text-decoration:underline;}


Visited Link Attributes
To change the way a link will look after its been visited, use this code.

a:visited {color:#000000;font-weight:bold;font-size:10pt;font-family:verdana;text-decoration:overline;}


Active Link Attributes
To change the way a link will look when its active, use this code.

a:active{color:#000000;font-weight:bold;font-size:10pt;font-family:verdana;text-decoration:line-through;}


Hover Link Attributes
There are several different ways you can change the hover attributes of a link.

To change the basic hover attributes, use this code.

a:hover{color:#000000;font-weight:bold;font-size:10pt;font-family:verdana;text-decoration:line-through;}

To have the link flip on hover, use this code.

a:hover{color:#000000;text-decoration:none;font-weight:normal; filter:flipv;height: 0px;}

To have the link blur on hover, use this code.

A:Hover { color:#000000; text-decoration: none; font-weight:normal; filter:blur; height: 0px;}

To have the link glow on hover, use this code.

a:hover { color: white; background-color:; filter: glow(color= steelblue, strength= 5); height:0px; text-decoration: none; cursor: help }

To make the link turn to capital letters on hover, use this code.

a:hover{text-transform:uppercase}

To make a border around the link on hover, use this code.

a:hover{border:4px dotted red}