Cascading Style Sheets (CSS) are part of DHTML (Dynamic HTML) introduced in the 4.0 browsers. They enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called "coolstyle" which has the following characteristics defined: font, size, bold, text color, background color, and underline.

Some text inside a css style called coolstyle

Another example is on this page, which shows how the <A> tag for links has been redefined to have no underline.

Cascading Style Sheets are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

• Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Verdana font with a specific pixel height (this is the case for the paragraphs on this page).
• Style Sheets can define new styles which can be applied to any text selection. This is the case with the <span class="coolstyle"> tag above, where the font, text color, background color, and underline are defined with a single style.
• The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and page breaks for printing (but not all of these features are supported in current browsers).
• Many of the styles defined in the CSS1 specification are not displayed properly inside Dreamweaver, and must be viewed in Netscape or Explorer.
• And of course, several of the style attributes display differently in Netscape and Explorer, or do not display at all in any browser.

1. Select TEXT>CSS STYLES>NEW STYLE...
2. To redefine an existing tag, select REDEFINE HTML TAG, and select the tag from the pull down menu
3. To create a new tag, select MAKE CUSTOM STYLE, and give the new tag a name using the following rules:
   1. it should begin with a period
   2. the case of the characters is ignored
   3. it can contain only the characters A-Z, a-z, 0-9, and the dash "-"
   4. the underscore "_" and space " " characters are not allowed
   5. style names not following these rules will be ignored in some browsers
4. Select THIS DOCUMENT ONLY to create the style in the current document.
5. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. More information about each of these Style Definitions is available in the Dreamweaver Help.
6. Select OK from the Styles dialog box
7. Select DONE to complete the editing process

1. If you've modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.
2. If you've created a new style, then:
3. Open the CSS STYLES window
4. Select the text you want to apply the style to and:
   1. Click on the desired style in the CSS STYLES window
   2. OR, you can do this by selecting TEXT>CSS STYLES>style
   3. OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected to text inside of tables. You should preview in both Netscape and Explorer to verify that the text is formatting correctly. If not, you may have to apply the style to the table or the text within the table.

Note also that you can convert (in most cases) a web page with style sheets to traditional, HTML 3.0 compatible format by selecting FILE>CONVERT>3.0 BROWSER COMPATIBLE, and selecting CSS STYLES TO HTML MARKUP. Dreamweaver will create a new page that is as close as possible as the original, but that uses only HTML markup. Note that some CSS formatting (such as leading) cannot be converted to standard HTML.