Did you find this useful?
Socialize it today.


CSS Styling Links

Friday, March 16, 2012

tags CSS

Just as you would style text on your web pages, styling documents is also a common practice. Links can be styled with CSS properties such as color, font-family, background, and more. A link element also have the ability to be in one of four states (pseudo-class). You can apply CSS to each state independently of each other. The four links states are as follows:

  • a:link - state of an unvisited link by a user
  • a:visited - state when the user has visited the link
  • a:hover - state when the user hovers over it
  • a:active - state when the link is clicked

Link Color

You can easily apply different colors to the different states of your links. For example, you may want to apply a blue color for unvisited links, but apply a red color for those links that have been visited by the same user.

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


When applying CSS to the link element, it is important to have the CSS rules in the order shown in the example.

Text Decoration

Another property that can be used to style links is text-decoration. For example, browsers will, by default, style the links with an underline. You may only want to display the underline when the mouse hovers over the link. You can change that behavior by applying the text-decoration property.


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


Background Color

It is also common to apply a background color to your links. You can do this by applying the background-color property.


a:link {background-color:yellow;}
a:visited {background-color:blue;}
a:hover {background-color:green;}
a:active {background-color:white;}


You can apply other properties to links, just like you would to the text within your document. Here is an example of what can be done to style links by adding borders, fonts, etc...


a:link{text-decoration:none;color:#000000;background-color:#FFFFFF;border:2px solid blue;padding:5px;}
a:visited {text-decoration:none;color:#000000;background-color:#FFFFFF;border:2px solid blue;padding:5px;}
a:hover {text-decoration:underline;color:#FFFFFF;background-color:#000000;border:2px solid blue;padding:5px;}
a:active {text-decoration:none;color:#000000;background-color:#FF0000;border:2px solid blue;padding:5px;}




Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS: The Complete Reference CSS: The Missing Manual HTML CSS and JavaScript Editor