| You are here : : Home > Free Resources > Dreamweaver Tutorials > Links Without Underline |
Basics
Featured Fireworks & Dreamweaver Template
|
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:
| <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 ''. 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.
| <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
New! 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!