Understanding Cascading Style Sheets

Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content in a web page. When you use CSS to format a page, you separate content from presentation. The content of your page--the HTML code--resides in the HTML file itself, while the CSS rules defining the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section). With CSS you have great flexibility and control over the exact appearance of your page, from precise positioning of layout to specific fonts and styles.

CSS lets you control many properties that HTML alone cannot control. For example, you can specify different font sizes and units (pixels, points, and so on) for selected text. By using CSS to set font sizes in pixels, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. For example, you can set margins and borders for block-level elements, float text around other text, and so on.

A CSS formatting rule consists of two parts--the selector and the declaration. The selector is a term (such as P, H1, a class name, or an id) that identifies the formatted element, and the declaration defines what the style elements are. In the following example, H1 is the selector, and everything that falls between the braces ({}) is the declaration:

H1 {


font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;

}

The declaration consists of two parts, the property (such as font-family) and value (such as Helvetica). In the previous CSS rule a particular style has been created for H1 tags: the text for all H1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.

The term cascading refers to your ability to apply multiple styles to the same element. For example, you can create one CSS rule to apply color and another to apply margins, and apply them both to the same text on a page. The defined styles "cascade" down to the elements on your web page, ultimately creating the design you want.

A major advantage of CSS is that it provides easy update capability; when you update a CSS rule in one place, the formatting of all the documents that use the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

• Custom CSS rules, also called class styles, let you apply style attributes to any range or block of text. (See Applying a class style.)
• HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
• CSS selector styles (advanced styles) redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.) Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles defined by #myStyle apply to all tags that contain the attribute-value pair id="myStyle").

CSS rules can reside in the following locations:

External CSS style sheets are collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This file is linked to one or more pages in a website using a link in the head section of a document.

Internal (or embedded) CSS style sheets are collections of CSS rules included in a style tag in the head portion of an HTML document.

Inline styles are defined within specific instances of tags throughout an HTML document.

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines.

Manual HTML formatting might override formatting applied with CSS. For CSS rules to control the formatting of a paragraph, you must remove all manual HTML formatting.

Dreamweaver renders most style attributes that you apply directly in the Document window. You can also preview the document in a browser window to see styles applied. Some CSS style attributes are rendered differently in Microsoft Internet Explorer, Netscape, Opera, and Apple Safari, and some are not currently supported by any browser.