Understanding Cascading Style Sheets
Cascading style sheets (CSS) are a series of formatting rules that control the appearance of Web page content. When using CSS to format a page, separate content from presentation. The content of the page (that is, 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 file header) . Using CSS gives you great flexibility and greater control over the exact appearance of your page, from precise layout positioning to specific fonts and styles.
CSS allows you to control many properties that HTML alone cannot control. For example, you can specify different font sizes and units (pixels, point sizes, etc.) for selected text. By using CSS to set font sizes in pixels, you also ensure a more consistent approach to page layout and appearance across multiple browsers.
In addition to formatting text, you can use CSS to control the formatting 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 more.
CSS formatting rules consist of two parts: selectors and declarations. A selector is a term that identifies a format element (such as P, H1, class name, or ID), and the declaration is used to define the style of the element. In the following example, H1 is the selector and everything between brackets ({}) is a declaration:
H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
A declaration consists of two parts: properties (such as font-family) and values (such as Helvetica). The above CSS rule creates a specific style for H1 tags: the text of all H1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.
The term cascading refers to the ability to apply multiple styles to the same element. For example, you can create one CSS rule to apply color, another CSS rule to apply margins, and then apply both to the same text on the page. The defined styles "cascade" down to the elements on your Web page, ultimately creating the design you want.
The main advantage of CSS is that it provides convenient update capabilities; when you update a CSS rule in one place, the formatting of all documents using that defined style is automatically updated to the new style.
The following style types can be defined in Dreamweaver:
Custom CSS rules (also called class styles) allow you to apply style properties to any range or block of text. (See Applying Class Styles.)
HTML tag styles redefine the formatting of specific tags (such as h1). When you create or change the CSS style of an h1 tag, all text formatted with the h1 tag is updated immediately.
CSS selector styles (advanced styles) redefine formatting for specific combinations of elements, or for other selector forms that CSS allows (for example, apply selector td h2 whenever an h2 header appears within a table cell ). Advanced styles can also redefine the formatting of tags that contain a specific id attribute (for example, a style defined by #myStyle can be applied to all tags that contain the attribute value pair id="myStyle").
CSS rules can be located in the following locations:
An external CSS style sheet is a series of CSS rules stored in a separate external CSS (.css) file (not an HTML file). The document is linked to one or more pages in the Web site using links in the header portion of the document file.
An internal (or embedded) CSS style sheet is a series of CSS rules contained within the style tag in the header of an HTML document.
Inline styles are defined within the entire HTML document in a specific instance of a tag.
Dreamweaver recognizes styles defined in existing documents as long as they comply with CSS style guidelines.
Tip
To display the O'Reilly CSS Reference Guide included with Dreamweaver, select Help > Reference, and then select O'Reilly CSS Reference from the pop-up menu in the Reference panel.
Manually set HTML formatting overrides formatting applied through CSS. For CSS rules to control paragraph formatting, all manually set HTML formatting must be removed.
Dreamweaver renders most style properties that you apply directly in the Document window. You can also preview the document in a browser window to see how the styles are applied. Some CSS style properties appear differently in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari, and some are not currently supported by any browser.