TechNote (Archived)

An overview of Cascading Style Sheets

CSS Introduction

Cascading Style Sheets (or CSS styles) are collections of formatting definitions that affect the appearance of web page elements. You can use CSS styles to format text, images, headings, tables, and so forth. With a single style you can pre-designate the color and alignment properties of an element for an entire document. For example, you could apply a style that turns all text to blue and right-aligned.

Workflow benefits

Using CSS Styles will save time. For example, let's say that you assigned a style to all paragraph text to make it italic. Later, you decide that italicized text isn't legible in the body. Simply remove the italics setting from the CSS style, and, presto, you've reformatted all of the text.

Kinds of CSS Styles

When you create a style in Dreamweaver, you choose from the following three options:

Custom Style (class)
Creates a style that can be applied as a CLASS attribute to web page elements, including ranges or blocks of text. There are many situations where you would choose custom for your style. For example, if you want to make some of the text on your web page yellow and bold;but not all the text;then you would want to create a custom style. The name that you give this custom style appears in the CSS Styles panel. (See Example 1 to view a CSS Styles panel with a list of custom styles.)
HTML Tag
Redefines the default formatting of specific HTML tags. If you wantall your text in an h1 (Heading1) tag to be purple, you can specifically modify the h1 tag. Subsequently, all text surrounded by the h1 tag will be purple.

Note: This kind of style will not appear in the CSS Styles panel (although it will appear in the Edit Styles dialog box in case you want to designate a different color).
CSS Selector
Allows you to use a customized declaration for your style. For example, you could define a style which affects a tag within another. This third kind of CSS style is meant mainly for advanced users, who know how to write a style declaration. For more information, see Eric A. Meyer's Cascading Style Sheets: The Definitive Guide (O'Reilly & Associates, 2000).

Note: To eliminate the underline in linked text, use this kind of style.

Document-level and external Style Sheets

A CSS style can be document-level (located within the HTML) or it can be external (located in a separate document known as the external style sheet). Example 2 shows you the CSS Styles panel with a style located in the HTML document and another located in an external styles sheet.

Updating styles on an external style sheet

Using an external style sheet makes it possible to automatically update all the style-affected elements in your web site by changing only the style sheet. This can be a significant time-saver for making formatting changes in a web site with many pages.

Step-by-step instructions
Following this introduction, you'll find tutorial-style instructions to create styles sheets;document-level and external;in these related TechNotes:

Creating embedded Cascading Style Sheets (TechNote 15231)
How to create an external Cascading Style Sheet (TechNote 12922)

Additional information

For more information on CSS, consult these Macromedia articles and TechNotes:

Setting different hover effects for individual links (TechNote 15680)
Using the a:hover feature in CSS (TechNote 15679)
Creating multiple link styles (TechNote 15350)
How to remove the underline from linked text (TechNote 14088)
An overview of Cascading Style Sheets (TechNote 15230)
Creating embedded Cascading Style Sheets (TechNote 15231)
How to create an external Cascading Style Sheet (TechNote 12922)

These CSS reference guides are also available:

Cascading Style Sheets: The Definitive Guide, by Eric A. Meyer (O'Reilly & Associates, Inc., 2000).

Note: Use the Dreamweaver Reference panel to get quick information about specific CSS Style. Choose Window > Reference to open the Reference panel. In the Book pop-up menu, select O'REILLY CSS Reference. To find information about a specific style, then click the Style pop-up menu and select your style of interest. You'll find the syntax, initial value, and example code;right inside Dreamweaver.
DHTML and CSS for the World Wide Web, 2nd Edition, by Jason Cranford Teague (Peachpit Press, 2001).

The Inserting and Formatting Text sections of Using Dreamweaver and Dreamweaver Help provide additional material on the subject of CSS. See also W3C's recommendations for CSS, as well as an excellent listing of resources devoted to CSS, the W3C's Cascading Style Sheets home page.