Formatting Links

One of the most common uses of CSS is to change the way links are displayed in the browser. Want your links to only be underlined when the cursor is over them? Want the background or text color to change when a visitor clicks? Or maybe you just want something other than your visitor's default colors? That's all CSS, and Dreamweaver can handle that. As covered in Chapter 5, you'll need to know if your site is going to use internal or external styles.

To format links:

1.	Click on the New CSS Rule button at the bottom of the CSS panel . The New CSS Rule dialog will appear.
2.	If you want to set a style that will apply to all links (whatever their state), or to set the default appearance for links, choose "Tag (redefines the look of a specific tag)" for the Selector Type, and for Selector, choose a . or For the Selector Type, choose "Advanced (IDs, pseudo-class selectors)," and for Selector, choose any option from the popup menu: a:link , a:visited , a:hover , or a:active ( Figure 7.9 ). Figure 7.9. The New CSS Rule dialog lets you choose which rule you're going to define. a:link is the default state of the link, seen when none of the other states are in use. a:visited is how the link will appear after the link has been clicked on and the linked page loaded. a:hover is how the link will appear while the visitor's cursor is over the link. a:active is how the link will appear while the visitor is clicking that particular link.
3.	For Define in, there are at least two options: New Style Sheet File or This document only. If the current document links to any style sheets, their names are included in the pop-up menu. Choose whichever is appropriate for this site, and click OK.
4.	If you chose to create a new style sheet, you'll see the Save Style Sheet File As dialog ( Figure 7.10 ). Choose where to save it and what to name it, and click Save. Figure 7.10. When you want a new style sheet, you can create that file here.
5.	The CSS Rule Definition dialog will appear ( Figure 7.11 ). You can create the specific rules you want for links either here or directly in the CSS panel ( Figure 7.12 ). Figure 7.11. After you create the rule, define its values here. Figure 7.12. The CSS panel, after various a rules have been defined. New properties can be set from here, also.

Tips

• If you don't set styles for your links, they are likely to display underlined and blue (unvisited) and purple (visited)but you can't be sure of that.

• Figure 7.12 shows some of the most common rules for CSS-formatted links: bold font-weight, and no underline except when the cursor is over the link.

The Style of Links

How to style links has been an ongoing controversy over the years : should a Web designer ever mess with a user 's defaults? Should links always be underlined? Should links always, sometimes, or never say, "Click here"?

The answers, as with so much about Web design, depend on who's visiting your site. If you've got a traditional e-commerce site geared towards average surfers, you'll probably want to make things as simple and straightforward as possible. If you've got a cutting-edge art gallery site that attracts people who are used to fashion-forward sites, you can be a little more daring. If you aren't sure which way to go, figure out what sites attract visitors like yours, and style your links similarly.

There's one rule that's always true: be consistent across your site. No one should ever have to learn a new navigation style on every page.