Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Dotted Link Rollovers
By BasicTemplates with External CSS

In this CSS tip we teach you how to change the link hover underline from solid to a dotted underline using CSS. We will be referring to code that will be placed within an "external" stylesheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

The (pseudo-class) a:hover controls the rollover characteristics of your links. Compare the differences of the code below:

Standard hover link underline:

a:hover {
color: #990000;
text-decoration: underline
}

Dotted hover link underline:

a:hover {
color: #990000;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
}

In the second code example, we stated the text-decoration property as "none" which is the link underline in the standard code example. Instead we stated we wanted to use a dotted border-style for the bottom border.

Read each line individually. You will find that one of the benefits of using CSS is that it is easy to read and determine what each line means. We even stated what color we wanted the dotted border (different than the text color) and 1px wide which is not possible with the standard method.

If you would like to use the dotted hover link underline technique, simply copy and paste it into your external style sheet. If your stylesheet already contains the a:hover pseudo-class, be sure to remember to remove it.