Play Dreamweaver 8: Learn about CSS Cascading style sheets

css|dreamweaver| style Sheet

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, the H1 selector, where {} 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 H1 creates a particular style for the label: the text of all the labels linked to this style H1 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 h1 The format of a particular label (for example). When you create or change a h1 label's CSS style, all h1 text formatted with the label is updated immediately.
• CSS Selector styles (advanced styles) redefine formatting for a particular element combination, or redefine the formatting of other selector forms allowed by CSS (for example, the h2 selector is applied whenever the caption appears inside a table cell td h2 ). Advanced styles can also redefine the formatting of a label that contains a specific id property (for example, #myStyle a defined style can be applied to all labels that contain property value pairs 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 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 style within the label of the header of the 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.