This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Formatting Links Using CSS

Cascading Style Sheets (CSS) are a collection of rules that impact the style of elements and specified tags on a web page. This page will explain how to use a Cascading Style Sheet to create a set of rules that will impact the look of an active link, a visited link, and a hover link.

return to topFormatting Active Links

  1. In creating a style for an active link, there are a number of different elements (e.g., text, text color, decoration, background color) that can be adjusted. This section will explain how to set decoration for an active link.

  2. From the CSS Styles pane, click NEW CSS RULE New CSS Rule button
    The New CSS Rule dialog box appears.
    New CSS Rule: a:active

  3. For Selector Type, select Advanced

  4. In the Selector text box, type the appropriate pseudo-class selector(s)
    OR
    From the Selector pull-down list, select the appropriate pseudo-class selector
    HINT: If the pull-down option is used, only one pseudo-class selector can be selected. If the text box option is used, one or more pseudo-class selections can be selected
    EXAMPLE: Type or select, a:active

  5. Click OK
    The CSS Rule definition dialog box appears.
    CSS Rule definition dialog box: Type

  6. Under Category, select Type

  7. For Decoration, select the desired option
    EXAMPLE: select underline

  8. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    If OK is selected, changes will automatically be applied to all affected link(s).

return to topFormatting Visited Links

In creating a style for a visited link, there are a number of different elements (e.g., text, text color, decoration, background color) that can be adjusted. This section will explain how to set text color for a visited link.

  1. From the CSS Styles pane, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.New CSS Rule dialog box: Advanced

  2. For Selector Type, select Advanced

  3. In the Selector text box, type the appropriate pseudo-class selector(s)
    OR
    From the Selector pull-down list, select the appropriate pseudo-class selector
    HINT: If the pull-down option is used, only one pseudo-class selector can be selected. If the text box option is used, one or more pseudo-class selections can be selected
    EXAMPLE: Type or select, a:visited

  4. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box: a:visited

  5. Under Category, select Type

  6. In the Color text box, type the appropriate hexadecimal color value
    OR
    From the drop-down color palette, select a color
    EXAMPLE: Type #9999CC
    HINT: For more information on selecting hexadecimal color values, refer to Web Publishing: Specifying Colors.

  7. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    If OK is selected, changes will automatically be applied to all affected link(s).

return to topFormatting Hover Links

In creating a style for the appearance of a link when users hold their cursor over the link, there are a number of different elements (e.g., text, text color, decoration, background color) that can be adjusted. This section will explain how to set a background color for when a link is being hovered over.

  1. From the CSS Styles pane, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.New CSS Rule dialog box: a:hover

  2. For Selector Type, select Advanced

  3. In the Selector text box, type the appropriate pseudo-class selector(s)
    OR
    From the Selector pull-down list, select the appropriate pseudo-class selector
    HINT: If the pull-down option is used, only one pseudo-class selector can be selected. If the text box option is used, one or more pseudo-class selections can be selected
    EXAMPLE: Type or select, a:hover

  4. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box: a:hover

  5. Under Category, select Background

  6. In the Background color text box, type the appropriate hexadecimal color value
    OR
    From the drop-down color palette, select a color
    EXAMPLE: Type #000066

  7. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    If OK is selected, changes will automatically be applied to all affected link(s).

Excellence. Our Measure. Our Motto. Our Goal.