|
|
|
|
CSS Links
|
|
Just like fonts, texts & backgrounds, links can also be styled in different ways using CSS styling properties like color, font, etc.
By default, a link appears in blue color with an underline. However, there are times when we wish to change the default style of the link to give it a new look. This is possible using the following four CSS link style selectors:
a:link – Defines the style of the link in its normal or unvisited state
a:visited – Defines the style of a visited link
a:hover – Defines the style of the link when user mouses over it
a:active – Defines the style of the link when user clicks on it
|
|
|
|
|
|
Example :
a:link {color:#0000FF;} /* unvisited link */
a:visited {color:#FF00FF;} /* visited link */
a:hover {color:#00FF00;} /* mouse over link */
a:active {color:#FF0000;} /* selected link */
|
Besides styling the links with reference to link color, it can also be styled with reference to text decoration & background color. The following examples can help understand this better:
Background Color :
In order to specify the background color for links, the CSS “background color property” is used.
Example:
a:link {background-color:#B2FF99;}
a:hover {background-color:#FF704D;}
|
Text Decoration :
In order to remove underlines from links, the CSS “text decoration property” is used. Other text decoration values include – blink, inherit, overline, underline, line-through or none.
Example:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
|
|
|
|
|
| |
|
| |
|
|
|
|
|
|
