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

Applying Color with CSS

Cascading Style Sheets (CSS) allow you to apply color to a page's background, selected text, elements, links, and various tags. There are three selector types that can be used to apply color to a document using CSS: Class, Tag, and Advanced. This document will review these three selector types and give examples for using each of them.

return to top Applying Color to Body Elements: Using the Tag Selector

The Tag option allows you to redefine the formatting of any HTML tag (e.g., <h1>, <p>, <body>) in your page. As an example, these instructions will define the font color for the paragraph, <p>, tag.

  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

  2. For Selector Type, select Tag

  3. From the Tag pull-down list, select the desired HTML tag
    EXAMPLE: Select p

  4. To create an external CSS file (.css), for Define in, select New Style Sheet File
    To create an internal or embedded style sheet, select This document only
    NOTES:
    You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Attaching Style Sheets.
    An embedded style sheet is located in the <head> section of the document it was created for. The style settings for that style sheet apply only to that document.

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

  6. Under Category, select Type

  7. In the Color text box, type the appropriate hexadecimal color value
    OR
    From the Color box, select the desired color
    EXAMPLE: Type #9999CC
    HINT: For more information on selecting hexadecimal color values, refer to Web Publishing: Color Names and Numbers.

  8. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    NOTE: If OK is selected, changes will automatically apply to all effected tag(s).

return to topApplying Color to Specific Text: Using the Class Selector

The Class option allows you to create a custom style that can be applied to selected text. Once a Class style has been created, that style can be applied to any element on a page. As an example, these instructions will define how to set a text style that can be applied to an organization name wherever it appears on the web page.

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

  2. For Selector Type, select Class

  3. In the Name text box, type a descriptive name that will make clear the function/purpose of this Class style
    NOTE: All Class style names must began with a period (.)
    EXAMPLE: Type .UWEC

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

  5. Under Category, select Type

  6. In the Color text box, type the appropriate hexadecimal color value
    EXAMPLE:     Type #9999CC
    HINT:     For more information on selecting hexadecimal color values, refer to Web Publishing: Color Names and Numbers.

  7. To cancel the changes, click CANCEL
    To accept the changes, click OK

  8. To apply this style, select an instance of the text that is to be altered using this style

  9. In the Properties pane, from the Style pull-down list, select the name of the Class style
    EXAMPLE: Select UWEC
    Selected text will reflect the desired style's settings.

 

return to topApplying Color to Links: Using the Advanced Selector

The Advanced Selector option allows you to create styles for the different link options a:active, a:link, a:hover, and a:visited. These link options are also known as pseudo-class selectors. As an example, these instructions will define how to set text color and decoration for an a:visited link.

  1. From the CSS Styles pane, click NEW CSS RULE New 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: Example

  5. Under Category, select Type

  6. In the Color text box, type the appropriate hexadecimal color value
    EXAMPLE:     Type #9999CC
    HINT:     For more information on selecting hexadecimal color values, refer to Web Publishing: Color Names and Numbers

  7. For Decoration, select the desired option
    EXAMPLE: Select none

  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 effected link(s).

Excellence. Our Measure. Our Motto. Our Goal.