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