Learn Dreamweaver8 Learn how to master CSS cascading style sheets

Understanding Cascading Style Sheets

Cascading Style Sheets (CSS) are a series of formatting rules that control the appearance of Web page content. When you use CSS to format the page, separate the content from the presentation. The content of the page (that is, the HTML code) resides in the HTML file itself, while the CSS rules used to define the code representation reside in another file (the external style sheet) or another part of the HTML document (usually the header portion of the file). Using CSS can be very flexible and better control the appearance of the page, from the precise layout to the specific font and style.

CSS allows you to control many of the properties that HTML cannot control alone. For example, you can specify different font sizes and units (pixels, points, and so on) for the selected text. By using CSS to set the font size in pixels, you can also ensure that the layout and appearance of the page are handled more consistently in 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 the margins and borders of block-level elements, floating text around other text, and so on.

The CSS formatting rules consist of two parts: selectors and declarations. A selector is a term (such as a P, H1, class name, or ID) that identifies a format element and is declared to define an element style. In the following example, H1 is a selector, and all content between brackets ({}) is declared:

H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}

Declarations are made up of two parts: attributes (such as font-family) and values (such as Helvetica). The CSS rule above creates a particular style for the H1 tag: The text of all H1 tags linked to this style will be 16 pixel size, Helvetica font, and bold.

The term cascading represents the ability to apply multiple styles to the same element. For example, you can create a CSS rule to apply a color, create another CSS rule to apply the margins, and then apply both to the same text on the page. The defined style goes down "cascade" to the elements on your Web page and eventually creates the design you want.

The main advantage of CSS is that it provides convenient updates, and when you update a CSS rule, the formatting of all documents that use that defined style is automatically updated to the new style.

The following style types can be defined in Dreamweaver:

Custom CSS rules, also known as Class styles, enable you to apply style attributes to any text range or block of text. (See Apply class styles.) ）

HTML tag Styles redefine the format of specific tags, such as H1. When you create or change a CSS style for a H1 label, all text formatted with the H1 label is updated immediately.

CSS Selector styles (advanced styles) redefine the formatting of a particular element combination, or redefine the formatting of other selector forms allowed by CSS (for example, the selector TD H2 is applied whenever the H2 caption appears inside a table cell). Advanced styles can also redefine the formatting of a label that contains a specific id attribute (for example, #myStyle-defined style can be applied to all labels that contain the id= "MyStyle" of the property value).

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 link in the header section of the document file is linked to one or more pages in the Web site.

An internal (or embedded) CSS style sheet is a series of CSS rules that are contained within a style label that is included in the header section of an HTML document file.

Inline styles are defined within an entire HTML document in a specific instance of a label.

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

Tips

To display the O ' Reilly CSS Reference Guide contained in Dreamweaver, select Help > Reference, and choose O ' Reilly CSS Reference from the pop-up menu in the reference panel.

The HTML formatting that you set manually overrides formatting that is applied through CSS. To enable CSS rules to control paragraph formatting, you must delete all manually formatted HTML formats.

Dreamweaver renders most of the style properties that you apply directly in the document window. You can also preview the document in a browser window to see how the style is 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 browsers.