Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
CSS
Web Design
Graphic Design
Color Theory
Promotional
Make More Money
Timesavers
Business Ethics
Glossary of Terms
Reviews
Marketing
Business Resources




Name
Email

Link to Us!

CSS
Email this article  :  Printer friendly page


Dotted Link Rollovers

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.


Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Newest Articles in
CSS
Using Multiple External Style Sheets
Resizing Form Input Boxes, Buttons, and Text with CSS
Novel Paragraph Spacing with CSS
Is Your Site Ready for the Holidays? Part 3
Is Your Site Ready for the Holidays? Part 2

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates