Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Dreamweaver Tutorials > Links Without Underline   

 

Featured Fireworks & Dreamweaver Template

Interior Design Template 1
Interior Design
$59.95

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:

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

    The code will look like this:

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

    Important: You need to copy the style within the <HEAD> tags.

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

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 45000 templates!

create a free html5 website

Featured Template
Template # 34393
Type: Drupal 7 Theme
Price: $65