Links Without Underline

Tool(s) Required:

HTML Editor: Any
Recommended: Adobe Dreamweaver CS3

In this article we teach you how simple it is to create links with no underline. This is done using CSS Styles.

If you use Dreamweaver, do the following:

Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.
If you want to use the link without underline only for some links: Select Class in the Selector Type and type .links in the Name box.
If you want the link without underline for all links in your page or site: Select Advanced in the Selector Type. Now select a:hover from the Selector list box.
Define the style in an existing Style Sheet, a new Style sheet or embedded in your current Document, and click OK.
In the CSS Style Definition pop-up window that appears give the Text specifications in the Category: Type. Tick the checkbox none if you don't want any underline to appear for the links.
To use this style just select and right click the <a> tag in the tag selector located at the bottom left of the Document window. For the Set Class attribute select links from the list.

Read our Cool Text Effects Using CSS Styles in Dreamweaver article and our CSS Styles Tutorial to learn more.

If you don't use Dreamweaver, do the following:

If you are already familiar with CSS styles, all you need to do is add 'text-decoration: none' to your style, otherwise the copy-paste code for your web page is given below. Place it in the head content preferably.

If you want to use the link without underline only for some links, use the code:

To use this style you need to set the class property to links in the <a> tag. For example:
<a href="index.htm" class="links">Home</a>

If you want the link without underline for all links in your page or site you should use a:link instead of .links in the above code. You don't need to do anything else, all links automatically will not have any underline. Similarly you can set the a:visited and a:hover styles for all links.

Read our Cool Text Effects Using CSS Styles in Dreamweaver article and our CSS Styles Tutorial to learn more.

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization

This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!

SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!