Using HTML styles to format text

Inserting and Formatting Text > Using HTML styles to format text

Using HTML styles to format text

An HTML style is defined by one or more HTML tags (such as b, i, font, and center) that apply formatting to text. The HTML 4.0 specification released by the World Wide Web Consortium (W3C) in early 1998 discourages the use of HTML formatting tags in favor of CSS style sheets. In practice, however, HTML formatting tags—while offering more limited control over appearance than CSS style sheets and taking longer to load—are supported by a wider range of browsers than CSS style sheets, and are likely to remain part of the Web developer's arsenal for as long as 3.0 and earlier browsers make up a measurable proportion of Web traffic.

For specific information on formatting with HTML tags, see one of the following topics:

	Setting and changing fonts and styles
	Changing the text color
	Aligning text

HTML tags that define the structure of the document rather than its appearance—for example, headings, paragraphs, and lists—are still very much part of the HTML specification. In fact, if you are planning to use CSS style sheets to define the font characteristics for your page, it's important to use standard heading tags, because they help to preserve the structure of your page in browsers that do not support CSS style sheets. (To see an example of how this works, try viewing Dreamweaver Help in a 3.0 browser.) See Using paragraphs and headings.

Using HTML styles

Use HTML styles to save text and paragraph formatting that you want to use elsewhere in your documents. Once you have created an HTML style based on one or more HTML tags, you can reapply that formatting to any text in any document using the HTML Styles panel.

Unlike CSS styles, HTML style formatting only affects text that you apply it to, or text that you create using a selected HTML style. If you change the formatting of an HTML style you have created, text that was originally formatted with that style is not updated. If you want the ability to change formatting, and automatically update all instances of that formatting, use CSS styles; see Using CSS style sheets.

To display the O'Reilly HTML reference guide included with Dreamweaver, click the Reference button found on the toolbar and choose O'Reilly HTML Reference from the drop-down menu.

You can use the HTML Styles panel to record the HTML styles you use in your site, and then share them with other users, local sites, or remote sites.

To display the HTML Styles panel, do one of the following:

	Choose Window > HTML Styles.
	Click the HTML Styles icon in the Launcher bar or Launcher.

To view an existing HTML style:

1	In the HTML Styles panel, select a style.
	Note that Clear Paragraph Style and Clear Selection Style are used on text that has a style applied, but they are not styles themselves; they cannot be viewed or edited.
2	While in the HTML Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu, or double-click the HTML style and choose Edit from the context menu.
3	In the Define HTML Style dialog box, specify the settings for the style.
	The Apply To options determine whether the style applies to the selected text (Selection) or the current text block (Paragraph). The When Applying options determine whether the settings for the style are added to the original text formatting (Add to Existing Style), or removed from the existing formatting and replaced with the new settings (Clear Existing Style).

To apply an existing HTML style:

In the HTML Styles panel, select a style.

	If the Auto Apply checkbox at the bottom of the panel is selected, click the style once.
	If the Auto Apply checkbox is not selected, click the style, then click Apply.

To clear text formatting in your document:

1	Select the formatted text.
2	In the HTML Styles panel, click Clear Paragraph Style or Clear Selection Style.
	Clear Paragraph Style removes any formatting from the current text block in the document. Clear Selection Style removes any formatting from the selected text.

Note: You can use Clear Paragraph Style and Clear Selection Style to remove any formatting (except CSS formatting), regardless of how the original formatting was applied (for example, through the HTML Styles panel or the Property inspector).

To remove a style from the HTML Styles panel:

1	In the HTML Styles panel, deselect the checkbox to turn off the Auto Apply option.
2	Select an HTML style.
3	Click the Delete Style (trash can) icon in the lower right corner of the panel.

To create a new HTML style based on existing text:

1	In your document, select or create text that has the formatting you want to use as the basis of your new HTML style. You can use the Property inspector to view and apply formatting.
2	In the HTML Styles panel, click the New Style icon (plus sign) in the lower right corner.
3	In the Define HTML Style dialog box, name the style and adjust the formatting, if necessary.
	Select whether to apply the HTML style to selected text or the entire paragraph. Note that a paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected.
	Select whether to apply the HTML style in addition to the existing style (CSS or HTML) of the selected text or paragraph, or to clear the formatting of the selection or paragraph with the new HTML style. Keep in mind the hierarchy for applying styles: HTML styles take precedence over CSS styles, which take precedence over external CSS styles. See Using CSS style sheets.
	Note that the formatting options in the HTML Styles panel match those in the Property inspector.
4	Click OK.

To create a new HTML style based on an existing HTML style:

1	Make sure no text is selected in the Document window.
2	In the HTML Styles panel, select a style, then do one of the following:
	Click the triangle in the upper right corner of the panel to display the drop-down context menu.
	Right-click (Windows) or Control-click (Macintosh), then choose Duplicate from the context menu.
	The Define HTML Style dialog box appears. To reset it to the default options, click Clear.
3	Complete steps 3 and 4 in the instructions for creating a new style based on existing text.

To create a new HTML style from scratch:

1	In the HTML Styles panel, click the New Style icon; you can also choose Text > HTML Styles > New Style.
	The Define HTML Style dialog box appears.
2	Complete steps 3 and 4 in the instructions for creating a new style based on existing text.
	Click Clear to reset the dialog box to the default options.
3	Click OK.

To edit an existing HTML style:

1	Make sure no text is selected in the Document window.
2	In the HTML Styles panel, make sure the Auto Apply checkbox is deselected.
	If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Styles panel.
3	In the HTML Styles panel, right-click (Windows) or Control-click (Macintosh) the style, then choose Edit from the context menu.
	The Define HTML Style dialog box appears. To reset it to the default options, click Clear.
	When you edit an HTML style, Dreamweaver does not automatically update text that was previously formatted using the HTML style. If you want to update formatting applied with a style, use a CSS style sheet; see Using CSS style sheets.

To share your HTML styles with other sites or users:

1	Choose Window > Site Files to open the Site window in Site Files view.
2	In the right pane, open the site root folder, then open the Library folder.
	You'll notice a file called styles.xml. This file contains all your HTML styles for the site. You can put, get, check in, check out, and copy this file as you would any other file in your site. You can also create Design Notes for the styles.xml file. Note that you must first check out the styles.xml file before you can create or edit a style for a remote site.
	For more information on using these options, see Setting up a remote site.