Applying a Class style

Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. All class styles associated with the current document are displayed in the CSS Styles panel (with a period (.) prepended to their name) and in the Style pop-up menu of the text Property inspector.

You'll see most styles updated immediately, however, you should preview your page in a browser to verify a style was applied as expected. When you apply two or more styles to the same text, the styles may conflict and produce unexpected results. For more information, see About conflicting CSS styles.

Tip: When previewing styles defined in an external CSS style sheet, be sure to save the style sheet to ensure that your changes are reflected when you preview the page in a browser.

To apply a custom CSS style:

1. In the document, select the text to which you want to apply a CSS style.

   Place the insertion point in a paragraph to apply the style to the entire paragraph.

   If you select a range of text within a single paragraph, the CSS style affects only the selected range.

   To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the bottom left of the Document window.

2. To apply a class style, do one of the following:
   • In the CSS Styles panel (Window > CSS Styles), right-click the name of the style you want to apply and select Apply from the context menu.
   • In the text Property inspector, select the class style you want to apply from the Style pop-up menu.
   • In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in the context menu, select CSS Styles and then select the style you want to apply.
   • Select Text > CSS Styles, and in the submenu select the style you want to apply.

To remove a custom style from a selection:

1. Select the object or text you want to remove the style from.
2. Do one of the following:
   • In the text Property inspector, select None from the Style pop-up menu.
   • Right-click the applied rule you want to remove in the Relevant CSS tab and select Set Class > None from the context menu.

Related topics

• The Relevant CSS tab
• Editing a CSS style

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/mx2004/using/14_tex35.htm

Add Comment