Links Without Underline

Learn how to create links without the underline in Dreamweaver using stylesheets.

Have you wanted to get rid of the underline in a link? Well! It’s really simple using CSS styles. Learn how to make links with no underline.

If you use Dreamweaver as your HTML editor you need to go to your style palette, make a new style and apply the style on your link. Here are the steps:

Click on Windows>Styles
Click on the ‘Style Sheet‘ button
Click on New
Give your style an appropriate name like ‘nounderline’ and click on OK.
Here’s the trick – check the box next to None. This means that this style has no decoration.
Now you need to apply this style to all the links in your page.

The code will look like this:

<style type="text/css">
<!--
.nounderline { text-decoration: none}
-->
</style>

If you want the no underline style for all the links in your site you can use the a:link style. When you are creating a new style you need to choose ‘Use CSS Selector’. Click on OK and make your style (e.g Arial, size 10, color #000066, no underline). Click on the check box next to None to make sure your links are without an underline.

The code will look like this:

<!--
a:link { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000066; text-decoration: none}
-->

Once you have made the style you don’t need to apply it on all the links, it will automatically be the default style for all the links.

Note: If you are using an a:link style its best to use the a:visited also, or the link will look different when it has already been visited. You can also try the a:hover style to get some cool text rollovers.

E.g of a:link, a:hover and a:visted

<style type="text/css">
<!-- 
a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #990000; text-decoration: underline}
a:link { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000066; text-decoration: none}
a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #31654A; text-decoration: none}
-->
</style>

Copy and Paste the above code in your web page and check out your links. Make sure it copied within your <HEAD> tags.

If you are already familiar with CSS styles, all you need to do is add ‘text-decoration: none‘ to your style.

Check out our hot link on Cool text Rollover Effects Using CSS Styles