CSS Styling Links

linksStyling Links

Defines a link to an external resource. It is most commonly used to link a CSS file to an HTML document

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 mouses over it
  • a:active - a link the moment it is clicked

Example of links in Style sheet:

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 )

In the above example the link changes colour depending on what state it is in.
The most commonly used declaration is the "a:hover" colour change. You have all seen it in action on most websites, when you mouse over a link it changes colour.

Note:  When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Text Decoration

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

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

 This is just the basics of using the CSS styles with links.

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter