Saturday, November 3, 2012

CSS Link Styling


We can style links with text and font properties. The links can be created using the <a>.  We can style the links depending upon their state. You can set them when cursor is hovering over the link or when a link is visited by the user.  Following are the states for the link:

o   Link:  This is for simple link.
o   Visited: This for the links that are clicked.
o   Hover: The links on which mouse is hovering.
o   Active: This for the links that are about to be linked.

 The mentioned states are also called as pseudo classes. When defining the CSS the above pseudo class should be defined in the order link, visited, hover, active.
For example:

The below example will set style for the links in the html page.
     a:link{ font: italic lighter 10px Arial #0011CC }

Following example will set the style for the links visited by the user
     a:visited{ font: italic lighter 10px Arial #FF0000 }

Following example sets the style and is displayed when mouse is hovering on the link
     a:hover{ font: italic bold 10px Arial #0011CC }

Following example sets the style and is displayed when user is about to click the link
     a:active{ font: italic bold 10px underline Arial #0011CC }


  Live example :  Link Pseudo class