Stockvault.net Tutorials » CSS Tutorials

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></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.)

Step 3: Changing the background color

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

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

CSS Link styles

Introduction

Step 1: The Code

Step 2: Changing font and size on mouseover

Step 3: Changing the background color

Photoshop Tutorials

Dreamweaver & CSS Tutorials

Partner Sites

Advertisment