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.
Formatting Active Links
-
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.
-
From the CSS Styles pane, click NEW CSS RULE
The New CSS Rule dialog box appears.
-
For Selector Type, select Advanced
-
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 -
Click OK
The CSS Rule definition dialog box appears.
-
Under Category, select Type
-
For Decoration, select the desired option
EXAMPLE: select underline -
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).
Formatting 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.
-
From the CSS Styles pane, click NEW CSS RULE
The New CSS Rule dialog box appears.
-
For Selector Type, select Advanced
-
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 -
Click OK
The CSS Rule definition dialog box appears.
-
Under Category, select Type
-
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. -
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).
Formatting 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.
-
From the CSS Styles pane, click NEW CSS RULE
The New CSS Rule dialog box appears.
-
For Selector Type, select Advanced
-
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 -
Click OK
The CSS Rule definition dialog box appears.
-
Under Category, select Background
-
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 -
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).
