WEBSITE TEMPLATES       FLASH WEBSITES       FLASH INTROS   

Search Templates     
Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
Website Promotion
Tutorials
Website
Add Ons
You are here : : Home > Free Resources > Dreamweaver Tutorials > Links Without Underline   

 

Featured Fireworks & Dreamweaver Template

Christian Template 7
Christian
$49.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

Dreamweaver Interactive Video Tutorials - Discover Everything You Need To Know To Build Your Website Step By Step From Start To Finish With This Dreamweaver Tutorial.

Click Here for more Dreamweaver learning resources!

Dreamweaver Creative Suite 3. Design, develop, and maintain standard-based websites. Order Now!



Search
www.entheosweb.com

Template Number: 13267
Type: FULL SITE
Price: $62

Enter your email id


Recommended Hosting

Home  |  Templates   |  Low Cost Solutions  |  Custom Services  |  Free Resources  |  Contact
Website Templates  |  Full  Flash Website Templates   |  Flash Intros  |  Logos & Corporate Identities  |  Swish Templates  |  Ecommerce Templates  |  CMS & Blog Templates
Copyright © 2004-2008 www.entheosweb.com - Entheos. All Rights Reserved.