Note: This article is repurposed from the Dreamweaver CS5 help system.

About cascading style sheets

Cascading style sheets CSS is a collection of formatting rulesthat control the appearance of content in a web page. Using CSS stylesto format a page separates content from presentation. The content ofyour page—the HTML code—resides in the HTML file, and the CSS rulesdefining the presentation of the code reside in another file an externalstyle sheet or in another part of the HTML document usually the headsection. Separating content from presentation makes it much easier tomaintain the appearance of your site from a central location because youdon't need to update every property on every page whenever you want tomake a change. Separating content from presentation also results insimpler and cleaner HTML code, which provides shorter browser loadingtimes, and simplifies navigation for people with accessibility issuesfor example, those using screen readers.

CSS gives you great flexibility and control over the exact appearanceof your page. With CSS you can control many text properties includingspecific fonts and font sizes; bold, italics, underlining, and textshadows; text color and background color; link color and linkunderlining; and much more. By using CSS to control your fonts, you canalso ensure a more consistent treatment of your page layout andappearance in multiple browsers.

In addition to text formatting, you can use CSS to control the formatand positioning of block-level elements in a web page. A block-levelelement is a standalone piece of content, usually separated by a newline in the HTML, and visually formatted as a block. For example, h1 tags, p tags, and divtags all produce block-level elements on a web page. You can setmargins and borders for block-level elements, position them in aspecific location, add background color to them, float text around them,and so on. Manipulating block-level elements is in essence the way youlay out pages with CSS.

For a tutorial on understanding CSS, watch the video Using CSS.

About CSS rules

A CSS formatting rule consists of two parts—the selector and thedeclaration or in most cases, a block of declarations. The selector is aterm such as p, h1, a classname, or an id that identifies the formatted element, and thedeclaration block defines what the style properties are. In thefollowing example, h1 is the selector, and everything that falls between the braces {} is the declaration block:

An individual 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 style (which comes from a rule, or a collection of rules) residesin a place separate from the actual text it’s formatting—usually in anexternal style sheet, or in the head portion of an HTML document.Thus, one rule for h1 tags can apply to many tags at once(and in the case of external style sheets, the rule can apply to manytags at once on many different pages). In this way, CSS providesextremely easy update capability. When you update a CSS rule in oneplace, the formatting of all the elements that use the defined style areautomatically updated to the new style.

You can define the following types of styles in Dreamweaver:

• Class styles let you apply style properties to any element or elements on the page.
• 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.
• 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: 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 or an @import rule in the head section of a document.
• Internal or embedded CSS style sheets: Collections of CSS rules included in a style tag in the head portion of an HTML document.
• Inline styles: Defined within specific instances of tags throughout an HTML document. Using Inline styles is not recommended.

Dreamweaver recognizes styles defined in existing documents as longas they conform to CSS style guidelines. Dreamweaver also renders mostapplied styles directly in Design view. Previewing the document in abrowser window, however, gives you the most accurate "live" rendering ofthe page. Some CSS styles are rendered differently in MicrosoftInternet Explorer, Netscape, Opera, Apple Safari, or other browsers, andsome are not currently supported by any browser.

To display the O'Reilly CSS reference guide included withDreamweaver, select Help > Reference and select O’Reilly CSSReference from the pop?up menu in the Reference panel.

About cascading styles

The term cascading refers to the way a browser ultimatelydisplays styles for specific elements on a web page. Three differentsources are responsible for the styles you see on a web page: the stylesheet created by the author of the page, the user’s customized styleselections if any , and the default styles of the browser itself. Theprevious topics describe creating styles for a web page as the author ofboth the web page and the style sheet attached to that page. Butbrowsers also have their own default style sheets that dictate therendering of web pages, and in addition to that, users can customizetheir browsers by making selections that adjust the display of webpages. The final appearance of a web page is the result of the rules ofall three of these sources coming together or "cascading" to render theweb page in an optimal way.

A common tag—the paragraph tag, or <p>tag—illustrates the concept. By default, browsers come with stylesheets that define the font and font size for paragraph text that is,text that falls between <p> tagsin the HTML code. In Internet Explorer, for example, all body text,including paragraph text, displays in Times New Roman, Medium font bydefault.

As the author of a web page, however, you can create a style sheetthat overrides the browser's default style for paragraph font and fontsize. For example, you can create the following rule in your stylesheet:

When a user loads the page, the paragraph font and font sizesettings set by you as the author override the default paragraph textsettings of the browser.

Users can make selections to customize the browser display in anoptimal way for their own use. In Internet Explorer, for example, theuser can select View > Text Size > Largest to expand the pagefont to a more readable size if they think the font is too small.Ultimately (at least in this case), the user’s selection overrides boththe default browser styles for paragraph font size and the paragraphstyles created by the author of the web page.

Inheritance is another important part of the cascade. Properties formost elements on a web page are inherited—for example, paragraph tagsinherit certain properties from body tags, bullet list tags inheritcertain properties from paragraph tags, and so on. Thus, if you createthe following rule in your style sheet:

All paragraph text on your web page (as well as text thatinherits properties from the paragraph tag) will be Arial and italicbecause the paragraph tag inherits these properties from the body tag.You can, however, become more specific with your rules, and createstyles that override the standard formula for inheritance. For example,if you create the following rules in your style sheet:

All body text will be Arial and italic except paragraph(and its inherited) text, which will display as Courier normal(non-italic). Technically, the paragraph tag first inherits theproperties that are set for the body tag, but then ignores thoseproperties because it has properties of its own defined. In otherwords, while page elements generally inherit properties from above, thedirect application of a property to a tag always causes an override ofthe standard formula for inheritance.

The combination of all of the factors discussed above, plus otherfactors like CSS specificity (a system that gives different weight toparticular kinds of CSS rules), and the order of CSS rules, ultimatelycreate a complex cascade where items with higher priorities overrideproperties that have lower priorities. For more information on therules governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.