
modify the <A> tag by adding an effect that underlines the link only when a viewer hovers the mouse over it. That way, your viewer instantly receives feedback that the link is indeed a hyperlink. Chapter 8: Cascading Style Sheets 215 To display an underline when users mouseover a link: 1. Choose Text?CSS Styles?New (or click the New CSS Rule button in the CSS panel). The New CSS Rule dialog box appears. 2. Select the Advanced option in the Selector Type area. 3. Choose a:hover from the Selector pop-up menu. 4. In the Define In area, select This Document Only. 5. Click OK. The CSS Rule Definition dialog box opens. 6. Make sure that the Type category is selected and check the Underline option in the Decoration section. 7. Click OK to apply the changes and then save your document. To preview the effects of the style changes you just made, you need to view the page in a Web browser because some interactive effects dont show up in Figure 8-10: Using CSS to disable the underlining of hypertext links. 216 Part III: Advancing Your Site Dreamweaver Design view. Take a look at how your links now appear and how they interact with the user. This cool effect is much simpler to create than a rollover behavior. Try experimenting with different style sheet rules on the different anchor selectors to achieve exciting results. For example, you can also cause the link, when its moused over, to become bold rather than underlined or to change color. You can also apply any other CSS effect you can think of to enhance the appearance of your links. You can modify a:visited links to change the attributes of visited links and a:active links to change the attributes of links while theyre being clicked. Remember that any styles you create in this way affect all links on your page unless you specifically apply a different class style to the individual link that overrides the selector style. Dreamweaver features a quick way to alter the appearance of links in the Page Properties dialog box (see Figure 8-11). When you use this option, Dreamweaver automatically generates the CSS code to alter your link display. You dont have as much control with this option (you can change many more aspects of your link display if you set up the CSS yourself); but for quickly modifying link behavior (especially if all you want to do is get rid of underlining), this shortcut is a good one. Simply choose Modify?Page Properties and make your changes in the Links category. Later, you can add additional properties via the regular CSS tools. Figure 8-11: Using the Page Properties dialog box to modify link appearance.