A style is a group of formatting attributes that controls the appearance of a block or range of text. Use styles to format a single document, or use an external style sheet (that is, one that is stored externally and linked to the current document) to control several documents at once. A style sheet includes all of the styles for a document.
Styles are identified by name or by HTML tag, allowing you to change an attribute of a style and see all text to which that style applies instantly reflect the change. Styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. They can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers.
Click Show Me for an animated introduction to creating style sheets in Dreamweaver.
Style sheets reside in the HEAD area of a document and define a series of styles. Styles can define the formatting attributes for HTML tags, ranges of text identified by a CLASS attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines.
Style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some style attributes, but most earlier browsers ignore them.
There are three types of styles in Dreamweaver:
HTML tag styles redefine the formatting for a particular tag, such as H1. When you create a style for the H1 tag, all the text with the H1 tag immediately changes.
Custom styles are similar to the styles you use in a word processor, except that there is no distinction between character and paragraph styles. You can apply custom styles to any range or block of text. If the style is applied to a block of text (such as an entire paragraph or unordered list), a CLASS attribute is added to the block's tag (for example, P CLASS="myStyle" or UL CLASS="myStyle"). If the style is applied to a range of text, SPAN tags containing the CLASS attribute are inserted around the selected text. See Applying a custom style.
CSS selector styles redefine the formatting for a particular combination of tags (for example, TD H2 applies whenever an H2 header appears inside a table cell) or for all tags that contain a specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle").
Text formatting that is manually applied to ranges of text can take precedence over styles. To make styles control the formatting for a paragraph, remove all other formatting settings.
Although you can set all the style attributes defined by the CSS1 specification in Dreamweaver, not all attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. It is also important to note that some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.
