CSS Links

Links are found in every document. Links are used to click their way from one page to another page. With CSS, we can style links to make them decorative and colorful.

Styling Links

Links can be styled with any CSS property such as color, font-family, background etc. In addition, links can be styled differently depending on what state they are in.

The four link states are:

• a:link - a normal link, or an unvisited link
• a:visited - a link that the user had visited
• a:hover - a link when the user mouses over it
• a:active - a link at the moment it is clicked

For example:

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Text Decoration

The text-decoration property is mainly used to remove the underline from the links.

For example:

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

Background Color

The background-color property is used to specify background color for the links.

For example:

a:link {background-color:#0000FF;}
a:visited {background-color:#FF00FF;}
a:hover {background-color:#00FF00;}
a:active {background-color:#FF0000;}