Learn about CSS

Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on 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 that define 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 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 cannot be controlled with HTML alone. 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.

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 the value (such as Helvetica). The preceding example creates a style for H1 tags: The text for all H1 tags linked to this style is 16 pixels in size, and uses Helvetica font and bold.

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

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

You can define the following types of rules in Dreamweaver:

Custom CSS rules, also called class styles, let you apply style attributes to any range or block of text. All class styles begin with a period (.). For example, you could create a class style called .red, set the color property of the rule to red, and apply the style to a portion of already-styled paragraph text.
HTML tag rules redefine the formatting for a particular tag, such as p or h1. When you create or change a CSS rule for the h1 tag, all text formatted with the h1 tag is immediately updated.
CSS selector rules (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").