Learn how to create
links without the underline in Dreamweaver using stylesheets.
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
- Name your style like 'nounderline' and click on OK.
- Here's the trick - check the box next to None. This means
that this style has no decoration.
- Then 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> |
Important: You need to copy the style within the <HEAD> tags.
If you want to maintain the no underline style throughout
in your site you can use the a:link style. When you creating
a new style you have 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 made the style you need not have to apply it for
all the links, it will automatically be the default style.
Note: When you are using an a:link style
its good to use the a:visited also, else 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 familiar with CSS styles, then you can add 'text-decoration:
none' to your style.
|
