11.1 Creating HTML Styles

HTML styles are applied and managed by using the HTML Styles panel, shown in Figure 11-1. Open it using Window HTML Styles, the HTML Styles icon in the Launcher bar, Ctrl+F11 (Windows), or Cmd+F11 (Macintosh).

Figure 11-1. The HTML Styles panel

Unlike styles that appear in the CSS Styles panel, which are specific to the current document, styles stored in the HTML Styles panel are available to all documents in your site. This feature makes HTML styles easier to apply locally, whereas CSS styles are easier to manage globally.

HTML styles cannot contain text or other content—they are used strictly for formatting. To insert, for example, a formatted copyright notice, you can use the History panel to record a "macro" command. You can also use the Assets panel to store favorite images, colors, and other assets. Although there is no text category in the Assets panel, you can use the Library category to hold commonly needed chunks of HTML (which can include text). Library assets have the advantage of being linked so that, unlike HTML styles, all instances of a library item update if the original item changes.

11.1.1 Character Formatting Versus Paragraph Formatting

Two default "styles"—Clear Selection Style and Clear Paragraph Style—always appear at the top of the HTML Styles panel. These pseudo-styles are used to remove existing formatting from either a character span or an entire paragraph. Character formatting can be applied to any span of characters; paragraph formatting affects an entire paragraph.

For example, bold formatting can be applied on a character-by-character basis—a single word or even a single character could be bolded while leaving the rest of a paragraph unbolded. But certain attributes, such as alignment, make sense only when applied to an entire paragraph (i.e., the same paragraph can't have text that is both centered and left-aligned; all the text must share the same alignment).

Because HTML defines both character-level tags (such as <i> and <b>) and paragraph-level tags (such as <p> and <h1>), Dreamweaver supports both character-level and paragraph-level HTML styles.

11.1.2 Defining an HTML Style's Attributes

Create a new HTML style by clicking the New Style icon in the HTML Styles panel, as indicated in Figure 11-1. Clicking this icon opens the Define HTML Style dialog box, shown in Figure 11-2, where you'll assign the text formatting for the style.

Table 11-1 explains the Define HTML Styles dialog box options.

Table 11-1. The Define HTML Style dialog box options

Property	Description
Name	A unique name for your style. Unlike CSS styles, you can use spaces in the name. Styles are alphabetized in the HTML Styles panel (but the two default styles are always shown at the top).
Apply To: Selection	Creates a character style, which is applied to the selected text span only. Character styles are indicated by a small "a" symbol next to their names in the HTML Styles panel.
Apply To: Paragraph	Creates a paragraph style, which is applied to an entire block of text, such as that between the <p> and </p> tags. Paragraph styles are indicated by a small paragraph symbol next to their names in the HTML Styles panel.
Add to Existing Style	When a style is applied, this option adds the newly applied style's formatting on top of existing formatting. Use it to add a bold style without undoing existing italic formatting. Additive styles are indicated by a plus (+) sign next to their names in the HTML Styles panel.
Clear Existing Style	Deletes any existing formatting from the affected character selection or paragraph before applying the new HTML style. Enable this radio button to "clear and reformat" in one step.
Font	Specifies the font to be applied by this style. To clear existing font face attributes, specify Default Font for the Font and enable the Clear Existing Style option.
Size	Sets either the absolute or relative font size. To clear existing font size attributes, specify None for the Size and enable the Clear Existing Style option.
Color	Sets the text color to be applied. To clear existing font color attributes, use a blank value (not all zeros) for the Color and enable the Clear Existing Style option.
Style	Character styles to be applied. Use the Bold and Italic toggle buttons or the Options menu (Underline, Strikethrough, Teletype, Emphasis, Strong, Code, Variable, Sample, Keyboard, Citation, and Definition). Multiple selections are allowed.
Format	Sets the block style to be applied (Heading 1 though Heading 6, paragraph, or preformatted). Applies to paragraph styles only.
Alignment	Sets alignment to be applied (left, center, right). Applies to paragraph styles only.

Because styles are sorted alphabetically in the HTML Styles panel, you can group styles in the list by naming them appropriately.

Figure 11-2. The Define HTML Style dialog box

Use a space at the beginning of a style's name to force it to appear at the top of the HTML Styles panel (after the two built-in styles). You can group character styles separately from paragraph styles by using an underscore to begin their names.

There are several other ways to open the Define HTML Style dialog box:

• Choose Text HTML Styles New Style.

• Right-click (Windows) or Ctrl-click (Macintosh) on the selection in the Document window and choose HTML Styles New Style from the contextual menu.

• Double-click the name of an existing style in the HTML Styles panel.

When creating a new style, attributes of the currently selected text are used to fill in the attributes in the Define HTML Style dialog box. You can use the Clear button in this dialog box to reset the style attributes to their default values.