Learn about CSS cascading style sheets in Dm 8

Learn more about Cascading Style Sheets

Cascading Style Sheets (CSS) are a series of format setting rules that control the appearance of Web page content. When you use CSS to set the page format, separate the content from the representation. The page content (that is, HTML code) resides in the HTML file itself, and the CSS rules used to define the code representation reside in another file (external style sheet) or another part of the HTML document (usually the file header. With CSS, you can flexibly and better control the appearance of a specific page, from precise layout to specific fonts and styles.

CSS allows you to control many attributes that HTML cannot control independently. For example, you can specify different font sizes and units (pixels, pounds, etc.) for the selected text ). By setting the font size in pixels using CSS, you can ensure that the page layout and appearance are processed in a more consistent manner in multiple browsers.

In addition to setting the text format, you can also use CSS to control the format and positioning of block-level elements on Web pages. For example, you can set the margin and border of block-level elements and floating text around other texts.

CSS format setting rules are composed of two parts: selector and declaration. A selector is a term (such as P, H1, class name, or ID) used to identify a format element. A declaration is used to define an element style. In the following example, H1 is the selector, and all content between parentheses ({}) is declared:

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

}
The declaration consists of two parts: attributes (such as font-family) and values (such as Helvetica ). The preceding CSS rule creates a specific style for the H1 label: the text of all H1 labels linked to this style will be 16 pixels in size, Helvetica font, and bold.

The term cascading indicates the ability to apply multiple styles to the same element. For example, you can create a CSS rule to apply the color, create another CSS rule to apply the margin, and then apply the two to the same text on the page. The defined style is "stacked" down to the elements on your Web page, and finally create the design you want.

The main advantage of CSS is that it provides a convenient update function. When updating a CSS rule, the format of all documents using the defined style is automatically updated to the new style.

You can define the following style types in Dreamweaver:

Custom CSS rules (also called class styles) allow you to apply style attributes to any text range or text block. (See application style .)

The HTML tag style redefines the format of a specific tag (such as h1. When you create or change the CSS style of the h1 tag, all texts in the format set with the h1 tag are updated immediately.

CSS selector styles (advanced styles) redefine the format settings of a specific element combination, or redefine the format settings of other selector forms allowed by CSS (for example, apply the selector td h2 whenever the h2 title appears in the table cell ). Advanced styles can also be used to redefine the format settings of tags that contain specific id attributes (for example, # A style defined by myStyle can be applied to all tags that contain attribute values for id = "myStyle ).

CSS rules can be located in the following locations:

External CSS style sheets are a series of CSS rules stored in a separate external CSS (.css) file (not an HTML file. By using the link in the document file header, the file is linked to one or more pages on the Web site.

An internal (or embedded) CSS style sheet is a series of CSS rules contained in the style label of the HTML document file header.

Inline styles are defined in the entire HTML document in a specific tag instance.

Dreamweaver identifies styles defined in existing documents as long as these styles comply with CSS style standards.

Prompt

To display the O '''reilly CSS reference in Dreamweaver, select "help"> "reference ", then select "O '''reilly CSS reference" from the pop-up menu of the "reference" panel ".

The manually set HTML format will overwrite the format settings applied through CSS. To enable CSS rules to control paragraph formats, you must delete all HTML formats manually set.

Dreamweaver presents most of the style attributes that you apply directly in the document window. You can also preview the document in the browser window to view the style application. Some CSS style attributes have different appearances in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari, and some are not currently supported by any browsers.