Section 17.4. Adding Style Rules for Links


17.4. Adding Style Rules for Links

You know from Chapter 6 that CSS recognizes four link states: unvisited, visited, active, and hover. For the purposes of your site, you can create one style rule that sets the appearance of all links, regardless of state; or you can create different style rules for different link states, as this section shows.

17.4.1. Creating One Style Rule for All Link States

For a blanket style rule that affects all link states, you want to redefine the appearance of the <a> tag in your stylesheet. Open the New CSS Rule dialog box, and choose Tag as the selector type. Type a in the Selector field, as Figure 17-13 shows, and click OK to go to the CSS Rule Definition dialog box.

Figure 17-13. Creating a new CSS rule for the <a> tag


Build the rule definition as you normally would, choosing whatever appearance attributes strike your fancy. Under Decoration in the Text category, choose None to remove the underline, as Figure 17-14 shows. If you want to keep the underline, you don't have to select the Underline optionthe browser automatically supplies an underline by default.

Figure 17-14. Under Decoration, choose None to remove link underlines


If you specify a color here, the color applies to all link states. Your links will no longer change color depending upon their state. If you want the links to continue changing color as they normally would, don't specify a color in this style rule.

Click OK when you're finished, and Dreamweaver adds your new style rule to your external stylesheet.

17.4.2. Creating Different Style Rules for Different Link States

For specific style rules for the different link states, open the New CSS Rule dialog box, but this time choose Advanced under Selector Type, and select a link state from the Selector menu, as shown in Figure 17-15. The a:link option refers to unvisited links. The rest are exactly what they say they are, although don't choose a:hover just yetsee "Adding a Rollover Effect" later in this chapter for information about rollovers.

Figure 17-15. Choosing a link state from the Selector menu


In the CSS Rule Definition dialog box, design the appearance of the link state, and then repeat this procedure for the remaining states. Any link states that you omit the browser's default appearance attributes.

17.4.3. Adding a Rollover Effect

Adding a rollover effect to your links is easy, whether you opted for a one-size-fits-all blanket rule or separate rules for separate states. Just follow these steps:

  1. Open the New CSS Rule dialog box.

  2. Under Selector Type, choose Advanced.

  3. From the Selector menu, choose a:hover. Click OK to proceed to the CSS Rule Definition dialog box.

  4. Design the appearance of the rollover effect. You don't have to duplicate your previous style rules here. Just describe what specifically happens to the link when the visitor rolls over it. For instance, if the link looks exactly the same except that it acquires an underline, check the Underline option under Decoration as in Figure 17-16, and do nothing else. If the link acquires an underline and becomes bold, check the Underline option, and choose bold from the Weight menu. If the link acquires an underline, becomes bold, and changes color, check Underline, choose bold, and set the desired color in the Color field.

    Figure 17-16. When hovered over, links will acquire an underline

  5. Click OK. Dreamweaver adds your rollover style rule to the external stylesheet.



Dreamweaver 8 Design and Construction
Dreamweaver 8 Design and Construction (OReilly Digital Studio)
ISBN: 0596101635
EAN: 2147483647
Year: N/A
Pages: 154
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net