CASCADING STYLE SHEETS

Creating a new CSS style

You can create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

To create a new CSS style:

1. Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box:
• In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
• In the text Property inspector, select Manage Styles from the Style pop-up menu, and click New in the dialog box that is displayed.
• In the Relevant CSS tab (Select Window > Tag inspector, and click the Relevant CSS tab) right-click and select New Rule from the context menu.
• Select Text > CSS Styles > New CSS Style.

The New CSS Style dialog box appears.

2. Define the type of CSS style you want to create:
• To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name text box, enter a name for the style.

Note: Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

3. Select the location in which the style will be defined:
• To create an external style sheet, select New Style Sheet File.
• To embed the style in the current document, select This Document Only.
4. Click OK.

The Style Definition dialog box appears.

5. Select the style options you want to set for the new CSS style.
6. When you are done setting style attributes, click OK.

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.

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 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.

Editing a CSS style

You can easily edit both internal and external styles you have applied to a document.

When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet. Edits to an external style sheet affect all the documents linked to it.

You can set an external editor for editing style sheets. For information about setting up an external editor, see Starting an external editor for media files.

To edit a CSS style:

1. Select Window > Tag inspector.
2. In the Tag inspector, click the Relevant CSS tab to view the CSS styles in the current document.
3. Place the insertion point in the text whose CSS style you want to edit.

Each CSS style you select in the page displays in the CSS panel.

4. Click the style you want to edit to select it, then do one of the following:
• Double-click the selected style in the CSS Styles panel.
• Right-click (Windows) or Control-click (Macintosh), then select Edit Rule from the content menu.
• Click the Edit Style button located at the bottom of the CSS panel.
• Select the style in the CSS panel, and edit its properties in the CSS Property inspector.

The changes you make are immediately applied to the current document, allowing you to preview your changes as they are made. If you are editing styles stored in an external style sheet, be sure to save your changes to see your updates applied.

5. When you are finished editing the style, save your work.

If you modify CSS styles that are in a styles sheet used by more than one document, those changes will be reflected in those pages as well.

Using the CSS Styles panel

You use the CSS Styles panel to create, edit, and remove CSS styles, as well as to attach external style sheets to documents.

To open the CSS Styles panel:

• Do one of the following:
• Select Window > CSS Styles.
• Press Shift+F11.

The CSS Styles panel lets you look at the style definition of the styles associated with the current document, as well as the hierarchy of the styles. The CSS Styles panel displays style definitions of custom (class) CSS styles, redefined HTML tags, and CSS selector styles.

When you create or attach a CSS style sheet, the style’s name and attributes appear in the CSS Styles panel. The CSS Styles panel lists all the selectors defined in all style tags and externally linked or imported style sheets. When you create a custom (class) style, it appears in the CSS Styles panel, the Style pop-up menu in the Property inspector, and in the Text > CSS Styles submenu.

The following buttons are located at the bottom of the CSS Styles panel:

Attach Style Sheet opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import into your current document. For information about attaching an external style sheet, see Exporting styles to create a CSS style sheet.

New CSS Style opens the New CSS Style dialog box. You use the New CSS Styles dialog to select the type of style you’re creating--for example, to create a class style, redefine an HTML tag, or to define a CSS selector. For information about creating a new style, see Creating a new CSS style.

Edit Style Sheet opens the CSS Style Definition dialog box. Edit any of the styles in the current document or in an external style sheet. For information about updating a style sheet, see Editing a CSS style.

Delete CSS Style removes the selected style from the CSS Styles panel, and removes the formatting from any element to which it was applied.

Note: Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu of options for working with CSS Style Sheet commands.