Link Styles

31 May 2006 > 0 Comments

There are four pseudo classes that can be used to style your links. These are;

• a:link (Normal link style)
• a:visited (previously clicked link style)
• a:hover (Link style when hovered with cursor)
• a:active (Link style the instant it is clicked)

For the examples below I am using a:link, but the styles can be used for any of the four link classes above.

<style type="text/css">

<!--

 a:link
{
  text-decoration: none;
}
 -->

</style>

<style type="text/css">

<!--

 a:link
{
  text-decoration: overline;

}
-->
</style>

<style type="text/css">

<!--

 a:link
{

  text-decoration: underline;
}
  -->
</style>

<style type="text/css">

<!--

 a:link
{
  text-decoration: underline overline;
}
  -->
</style>

<style type="text/css">

<!--

 a:link
{
  text-decoration: line-through;
}
  -->
</style>

<style type="text/css">

<!--

 a:link
{
  border-bottom: 1px dashed;
}
  -->
</style>

<style type="text/css">

<!--

 a:link
{
  border-bottom: 1px dotted;
}
  -->
</style>

<style type="text/css">

<!--

 a:link
{
  background-color: #fa6390;
}
  -->
</style>

Related Posts

• Styling Links
• Menu list background-color highlight fixed in I.E 6
• AA: Division based xhtml and css Template
• Favicon Tutorial (& download)
• Web Site Banners