CSS Link Styles

By Björgvin Guðmundsson

Introduction

Have you ever wondered how to make your text links change color, size or font on mouse-over? Well, these samples below show you how to place the code in your html document and adjust the settings to your own needs.

Step 1: The Code

Copy the code below and paste it between the <head> and the <body> tag in your html document, or paste it into your .css file without the:
"<style><!--" and "--></style>"

<style>
<!--
a:link { color: #000099; text-decoration: none;}
a:visited { color: #CCC; text-decoration: none;}
a:active { color: #666; text-decoration: none;}
a:hover { color: #000; text-decoration: underline;}
-->
</style>


What does it mean?

a:link = The default appearance of your text links.
a:visited = When the link has been clicked.
a:active = When the link is being clicked.
a:hover = When the mouse is over the link.

Now you can modify the color settings and the text decorations to fit your page.

Here are some decorations you can use:
- underline
- overline
- line-through

Step 2: Changing font and size on mouseover

If you want to change the font and the font-size on mouseover, you can do it like this:
(I have decided to put a:visited and a:active in the same style because they have the same styles.)

<style>
<!--
a:link { color: #000099; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px }
a:visited, a:active { color: #CCC; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 8px }
a:hover { color: #000; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 10px }
-->
</style>


Step 3: Changing the background color

You can also change the background color of your text link.

<style>
<!--
a:link { color: #000099; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px }
a:visited, a:active { color: #CCC; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 8px }
a:hover { color: #000; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #CCC }
-->
</style>


I hope this helps you figure out how to use this effect on your own page.
You can find more CSS tutorials at tutorialvault.net