russian version
graphic design
web site maintenance
technologies
web design prices
web templates web tutorials contact information  
 
About AsrVision Hosting Web design Search Engine Optimization Portfolio
 

CSS Tutorial - CSS Links

Setting link properties in Cascading Style Sheets (CSS)


CSS has several options for redefining the style of links.

LINK PROPERTIES

Property
Values
NS
IE
A:link
A:visited
A:active
A:hover
<style>
<style>
<style>
<style>
4+
4+
4+
6+
4+
4+
4+
4+

 
CSS Text
CSS Colors
CSS Links
CSS Lists
CSS Layers
CSS Cursors
 

DEFINING STYLES FOR LINKS

A s mentioned in the above table, there are four different selectors with respect to links.

Y ou can specify whatever style you'd like to each of these selectors, just like you'd do with normal text.

T he four selectors are:


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.
Note: Not supported by Netscape browsers prior to version 6.

PRACTICAL EXAMPLES

Here you can see a few examples on how CSS can be used to replace the traditional image based mouseover effects for links.

The hover style is not supported by Netscape browsers prior to version 6, but since it does no harm, you can still use it for the benefit of the +90% of visitors that arrive using MSIE).

One of the most common uses of CSS with links is to remove the underline. Typically it's done so that the underline appears only when a hover occurs. In the example below, we did just that. In addition we added a red color for hovered links.

Example: Hover

<style type="text/css">
.menu { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px;
color: #000000; text-decoration: underline; }
.menu:hover { text-decoration: none; }
</style>
<a href="#" class="menu">EXAMPLE</a>

The link from the above example would look like this: EXAMPLE
 
A final example would be to create links that have a permanent background color, obviously standing out from the rest.

E xample: Background colored links
<style type="text/css">
.boxedlink { color: #000000; background-color: EBEDEC; }
.boxedlink:hover { background-color: #FFFFFF; }
</style>
<a href="#" class="boxedlink">EXAMPLE</a>

T he link from the above example would look like this: EXAMPLE
 
WEB TEMPLATES (new)
 
Free HTML template !!!
Dark red html template
Metallic blue html template
Ultramarine html template
 
 
TUTORIALS (new)
 
CSS Tutorial
.htaccess tutorial
Paint Your ScrollBar
 
 
INFORMATION (new)
 
CPanel DEMO
Pricacy Statement
Template ordering info
Terms of template use
FAQ
 
This site is optimized for 1024/768 screen resolution