CSS LINK PROPERTIES

CSS Links

Styling Links

·         Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

·         In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouse over it
• a:active - a link the moment it is clicked

Syntax:

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 */

 

Common Link Styles

·         In the example above the link changes color depending on what state it is in.

·         Lets go through some of the other common ways to style links:

Text Decoration

·         The text-decoration property is mostly used to remove underlines from links:

Syntax:

a: link {text-decoration: none ;}
a:visited {text-decoration: none ;}
a:hover {text-decoration: underline ;}
a:active {text-decoration: underline ;}