Using CSS style sheets to set up Web pages in Dreamweaver

　　Understanding CSS

Cascading Style Sheets (CSS) are a series of formatting rules that control the appearance of Web page content. When you use CSS to format page formats, content and presentation are separated from each other. The page content (HTML code) is located in its own HTML file, and the CSS rules that define the code representation are located in another file (an external style sheet) or another part of the HTML document (usually part). Using CSS can be very flexible and better control the appearance of the page, from the precise layout to specific fonts and styles and so on.

CSS allows you to control many properties that are only uncontrolled by using HTML. For example, you can specify different font sizes and units (pixels, points, and so on) for the selected text. You can also ensure that the page layout and appearance are handled more consistently in multiple browsers by using CSS to set the font size in pixels.

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

　　The following is a reference fragment :

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 above example creates a style for the H1 tag: The text of all H1 labels linked to this style will be 16 pixel size and use Helvetica font and bold.

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

The main advantage of CSS is that it is easy to update, and whenever you update a CSS rule, the formatting of all documents that use that definition style is automatically updated to the new style.

　　The following rule 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. All class styles begin with a period (.). For example, you can create a class style called. Red, set the rule's Color property to red, and then apply the style to paragraph text in part of the defined style.

HTML tagging rules redefine the format of a particular label, such as P or H1. When you create or change a CSS rule for a H1 label, all text formatted with the H1 label is updated immediately.

CSS selector rules (advanced styles) redefine the format of a particular element combination, or other CSS-enabled selector formats (for example, the selector TD H2 is applied whenever the H2 caption appears in a table cell). Advanced styles can also redefine the format of a label that contains 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").