Basic CSS link effects

Cascade style sheets offers whole varieties of tricks that can make your links and text on page look really cool.

Cascade style sheets offers whole varieties of tricks that can make your links and text look really cool.

Lets first create simple HTML and text example.




As you can see this is just simple text with call of effect class in <div> tag.

Now, create same text with link to page.html:



After that we can start creating CSS code.

Firstly we'll create class named effect:



Then, following code creates anchor property in element class:



as you can see with this example the link will be same style as normal text.

Now lets add style to link when user link is active and visited. That can be easily managed in CSS via A:link, A:visited, A:active and A:hover properties.

a:link - defines the style for normal unvisited links.

a:visited - defines the style for visited links.

a:active - defines the style for active links. A link becomes active once you click on it.

a:hover - defines the style for hovered links. A link is hovered when the mouse moves over it.
But be aware that a:hover property is not supported by Netscape browsers prior to version 6.

Let's play:




This CSS style will change the color of link text after the link is visited.

And last is styling a:hover property:



Hover effect will add underline option for text link. With hover styling you can change the link color, add underline, stroke effects, even change the font properties, type, size and decoration.

One of examples with font manipulation can be:



Advantages of using Cascade Style Sheets in designing your pages are that you will need to write and debug less code, about 50% fewer image files to create and update that instantly saves bandwidth.

GO to: Page 1 : Basic CSS link effects


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without author�s permission is illegal.