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 with CSS Styles

After you have created an embedded or external style sheet, you can apply the created style to text, objects, or elements as you create your web page. You may also find that you want to edit a created style, or even delete the created style altogether.

For more information on the advantages of CSS and types of CSS style sheets, see Overview of Cascading Style Sheets. For information on creating embedded styles and external style sheets, see Creating Style Sheets. For information on accessing and using the CSS Styles tab, see Using the CSS Styles Tab.

return to topApplying Styles

In order to view the formatting created by a cascading style sheet, the styles need to be applied to the desired text or tag(s).

HTML Tags and CSS Selectors

When you redefine an existing HTML tag or CSS selector, the style definition is automatically applied to the HTML code.

Custom Styles

Since custom styles are not attached to a specific HTML tag when they are created, you need to apply them to individual page elements. You can customize the appearance of elements on a web page using both Class (custom) styles and Tag styles.

Applying Custom Styles to a Selected Element: CSS Pane

  1. Select the text or element you wish to apply the Class style to
    OR
    Place the insertion point on the same line with the text or element you wish to apply the Class style to

  2. From the CSS Styles pane, click ALL
    CSS Styles pane

  3. In the All Rules scroll box, right-click the desired Class style » select Apply
    NOTES:
    All Class styles are designated with a period (.) preceding the name (e.g., .greentext, .allcaps).
    The style is applied.

Applying Custom Styles to a Selected Element: Design View

  1. From the Design view, select the text or element

  2. Right click your selection » select CSS Styles » the Class style to apply

Applying Custom Styles to a Selected Element: Properties Pane

  1. In the Design view, select the object or text that you want to apply the Class style to

  2. In the Properties pane, from the Style pull-down list, select the appropriate Class style

return to topEditing Styles

As you are designing your web pages, you may decide that you would like to change a style that you have already defined. For information on using the Editing Styles view, see Edit Styles.

  1. From the CSS Styles pane, click ALL
    CSS Styles pane

  2. In the All Rules scroll box, select the style you want to edit

  3. Right click your selection » select Edit...
    OR
    From the CSS pane toolbar, click EDIT STYLE Edit CSS Styles button
    The CSS Rule definition dialog box appears. CSS Rule definition dialog box

  4. For the appropriate categories, make the desired changes

  5. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK

return to topDeleting Styles

As your web page develops, you might decide that you would like to delete a style or style sheet.

  1. From the CSS Styles pane, click ALL
    CSS Styles pane

  2. In the All Rules scroll box, select the style you want to delete

  3. Right click your selection » select Delete
    OR
    From the CSS Styles toolbar, click DELETE CSS RULEDelete CSS Style
    The style sheet entry is removed from the CSS Styles pane, and the style definition is removed from all applicable tags on your web pages.

Excellence. Our Measure. Our Motto. Our Goal.