Link Effects

Box Shadows


IMC Home Page

What Are Link Effects?

Cascading Style Sheet link effects give links the ability to have a different appearance for each state. A link can have a unique look when it:

Link to Google
Here's an example of an image rollover. Try it!

It is created using two separate images that change using JavaScript. Here are the two images:

Up state image
Over state image
(The two images are not linked and do not ave any effects associated with them.)

The traditional method of creating these different appearances is by using rollovers. A rollover is an image swap effect that requires JavaScript to work. These are sometimes called "image rollovers." Using Cascading Style Sheet pseudo classes it is possible to create "CSS rollovers" that do much the same thing as image rollovers, but do not require JavaScript or other scripting technology.

Pseudo Classes

Pseudo classes are specialized CSS classes that can be applied to some CSS elements. They are used to create special effects, and are particularly useful when applied to links. The default appearance for a text link is standard blue and underlined. Pseudo classes allow you to specify color, decoration, and more.

There are four pseudo classes that can be applied to links. Each represents a state. They are:

The :link pseudo class specifies the attributes of the link in its normal state, when a Web page is first displayed and a link has not been followed.

The :visited pseudo class specifies the attributes of the link after it has been visited by the browser.

The :active pseudo class specifies the attributes of the link while it is active, such as when the it is being clicked on. This is, generally, a very quick state and in some instances may not be seen because it passes so fast.

The :hover pseudo class specifies the attributes of the link when a mouse pointer passes directly over it.

Here are some examples of links that are styled with pseudo classes:

Link to Google

The attributes of one particular pseudo classes may be the same as those of another pseudo class or they can be different. You are allowed to mix and match attributes. The order in which the pseudo classes are written into the CSS is important, so to be sure that everything works correctly. Place them into the document in the order listed above.






< Continue to Page 2 >