CSS Hyperlink no Underline
How to create links with no underline
In this article we teach you how simple it is to create links with no underline. This is done using CSS Styles.
Prerequisite Knowledge
This tutorial teaches you how to create links with no underline using Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.
You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Links Without Underline
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:
<!--
.links { text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000066}
-->
</style>
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.
Software Required
Adobe Dreamweaver (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to create links with no underline using Dreamweaver, mostly any version of these software should be fine.
Compatible Versions of Dreamweaver for this Tutorial
Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6