CSS Links
Styling Links In CSS :
Links could be formed with any CSS property (e.g. color, font-family, background, etc.).
Special for hyperlinks are they can be formed differently relying on what state they are in.
The four hyperlinks states are:
- a:link – a normal, unvisited url.
- a:visited – a url the consumer has visited.
- a:hover – a url when the consumer mouses around it.
- a:active – a url the moment it’s clicked.
Example :
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Common Link Styles In CSS :
In the case over the hyperlink changes color relying about what state it is in.
Lets go through a number of the different popular approaches to style hyperlinks:
Lets go through a number of the different popular approaches to style hyperlinks:
Text Decoration :
The text-decoration property is mainly applied to get rid of underlines from links:
Example :
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color :
The background-color property specifies the background color for links:
Example :
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
