Dreamweaver MX: The Missing Manual

Creating Styles

You start most CSS-related tasks in the CSS Styles panel, which is the command center for creating and using styles (see Figure 8-1). To open it, choose Window→ CSS Styles (or press Shift-F11).

Figure 8-1. The CSS Styles panel lists the names of all custom styles available to the page from its internal style sheet as well as any linked external style sheets. Icons next to the name of each style identify its type—internal or external. You use the list to apply styles to selected objects on the page. As a result, only styles you apply yourself (custom styles) appear in the list. Dreamweaver doesn’t list HTML tag styles here; they’re automatically applied to HTML tags in the page. Turning on Edit Styles displays the formatting information contained in each style—including HTML tag styles.

Phase 1: Set Up the CSS Type

To create a new style, click the New Style button on the CSS Styles panel (see Figure 8-1), or choose Text→ CSS Styles→New CSS Style. The New CSS Style dialog box appears (Figure 8-2), where you begin the process of creating your new style:

• Type. Click the appropriate radio button for the kind of style you’re creating: Make Custom Style (to create your own style from scratch) or Redefine HTML Tag (to create an HTML tag style that Dreamweaver will automatically apply to each occurrence of the tag). See the facing page for a discussion of these two types.

  The ...