CSS - Creating a Style for Links

When defining styles for links there are four attributes that are available:

a:link - the style of an unvisited            a:visited - the style after the site has been visited

a:hover - the style when the mouse pointer is over the link

a:active - when the link is clicked

1. Open the spotlight_parks.dwt template file and select the links table at the bottom of the page. Open the New CSS Style dialog box by clicking on the New CSS Style button in the design panel.

2. In the New CSS Style dialog box select a:link in the Tag box, Redefine HTML in the Type box and spotlight.css in the Define in: box. Click OK.

3. In the definition window make the following selections:
Decoration : none  (this will remove the underlining that is usually associated with links)
Color: #FFFFFF.
Click OK. The text should change to reflect the new style.

4. Repeat this process for the a:visited attribute. Change the color to #FFFF00 with no decoration.

5. For the a:hover attribute make the following changes: color:#FFFF00  Decoration: underline
Since most people are used to having links underlined, this will cause the underline to appear but only when the mouse is over the link. This is a nice compromise between style and functionality.

6. Show the function of your final bahia_park page to your instructor for teacher check_________

Styles can be copied, edited and deleted very easily. For consistent design throughout a web site use CSS.

Congratulations, this lesson wraps up your introduction to Dreamweaver. Now on to Flash - how to add animation to your web site.

Creating a Style for Links

Intro to CSS  | Creating a Style for Paragraph Text  |  Creating a Style for Links