home > css > link styles

link styles

In order to have a variety of link styles on your web site, you will need to use css. Unfortunately, Dreamweaver won't allow you to add new link styles as classes to your style sheet and you will have to use a text editor, such as NotePad.

1. Open up your .css file in your text editor.
2. Copy the following, and edit according to your requirements:

.speciallink {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
}

.speciallink A:link {
color: #0099FF;
text-decoration: none;
}

.speciallink A:visited {
color: #9933FF;
text-decoration: none;
}

.speciallink A:hover {
color: #CC0000;
text-decoration: underline;
}

This will create a link style which is blue with no underline on unvisited links, purple with no underline on visited links and turns red with an underline when someone mouses over the link.

n.b.: The hover attribute only works in IE 5+ and Netscape 6+

3. Save the .css file.
4. In the html, you will need to make sure that the text you want to apply this style to has the above class specified:

<p class="speciallink"><a href="http://www.website.com/">text to be linked</a></p>

In Dreamweaver, simply highlight the text and apply the style "speciallink". To view the styles, go to Window > CSS Styles from the top toolbar.

n.b: You may need to close the web page and re-open it to see the new styles you have created appear in the CSS Styles list.

5. When you make any text that is in this style a link, it will display as you specified in the .css file.

Also, be careful about usability issues, and not confusing your visitors by having too many link styles - it still needs to be obvious to your visitors which bits of text are links, and whether they have already visited them before.