Techcss
Untitled Document

CSS Anchor, Links and pseudo classes

Anchors

The events of links (anchor) can be defined in CSS as give below.

a:link {color: #00EE00;}
the code sets the color of a link when no event is occuring
a:visited {color: #666666;}
sets the color a link changes to, when the user has already visited that url
a:hover {color: #996699;}
sets the color a link changes to as the user places their mouse pointer over the link
a:focus {color: #0000CC;}
this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links
a:active {color: #00DD00;}
sets the color a link changes to as it is pressed

We must declare the a:link and a:visited before we declare a:hover and we must declare a:hover before we can declare a:active.


Pseudo class

We can set the links contained in different parts of a web page to be different colors by using the pseudo class.
For example, say we want our links in the content area to have a different color as contrary to left or right column of the webpage.

#content a:link {color: #00EE00;}
#content a:visited {color: #666666;}
#content a:hover {color: #996699;}
#content a:focus {color: #0000CC;}
#content a:active {color: #00DD00;}

Lets assume that we have a main content in a division named "content" and all links within that division will now be styled by this new style selector. When our selector have a different name, just we have to change the #content selector to match our division name. Then for the links in a column we could use the following:

#column a:link {color: #00EE00;}
#column a:visited {color: #666666;}
#column a:hover {color: #996699;}
#column a:focus {color: #0000CC;}
#column a:active {color: #00DD00;}

This same method can be accomplished by declaring a class instead of an id.

.column a:link {color: #00EE00;}
.column a:visited {color: #666666;}
.column a:hover {color: #996699;}
.column a:focus {color: #0000CC;}
.column a:active {color: #00DD00;}

There is other way to code easier:

.column a:link {color: #00EE00;}
.column a:visited {color: #666666;}
.column a:hover {color: #996699;}
.column a:focus {color: #0000CC;}
.column a:active {color: #00DD00;}

Then in the HTML code:

<div class="column">
<a href="http://bengalgateway.com" title="The colours of Bengal">A portal over West Bengal</a>
</div>

* We can use other properties except color for anchoring code in CSS.