Inserting and Formatting Text > Using CSS style sheets

Using CSS style sheets

A style is a group of formatting attributes that control the appearance of a range of text in a single document. A CSS (Cascading Style Sheets) style can be used to control many documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well.

For example, imagine managing a very large Web site like Yahoo or Macromedia.com. You can make font and formatting changes to the entire site or many pages quickly and accurately by using CSS styles. Also, CSS styles let you control many properties that cannot be controlled using HTML alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points and so on). By using CSS styles and setting font sizes in pixels, you can ensure a more consistent treatment of your page layout and appearance with multiple browsers.

CSS styles have been around for sometime, but many Web site designers and creators have been reluctant to use them because of inconsistent browser support. However, if your audience includes viewers who are using browsers that support CSS styles (4.0 and later), you should avail yourself of the power and control they offer.

CSS styles are identified by name or by HTML tag, allowing you to change an attribute of a style and instantly see the change reflected in all the text to which that style applies. CSS styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. CSS styles can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers.

CSS style sheets reside in the head area of a document. CSS styles can define the formatting attributes for HTML tags, ranges of text identified by a class attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines.

CSS style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some CSS style sheets, but most earlier browsers ignore them.

Three types of CSS style sheets are available in Dreamweaver:

	Custom CSS styles are similar to the styles you use in a word processor, except that there is no distinction between character and paragraph styles. You can apply CSS custom styles to any range or block of text. If the CSS style is applied to a block of text (such as an entire paragraph or unordered list), a class attribute is added to the block's tag (for example, p class="myStyle" or ul class="myStyle"). If the CSS style is applied to a range of text, span tags containing the class attribute are inserted around the selected text. See Applying a custom (class) CSS style.
	HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
	Note: Be careful when redefining tags in a linked CSS, as this can change the layout of many pages. For example, if you redefine the table tag to look a certain way, it will alter the layout of other pages using tables.
	CSS selector styles redefine the formatting for a particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) or for all tags that contain a specific id attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle").

Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles.

Although you can set an unlimited number of CSS style attributes defined by the CSS1 specification in Dreamweaver, not all of the attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. Note also that some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.

Note: To display the O'Reilly CSS reference guide included with Dreamweaver, click the Reference button found on the toolbar and choose O'Reilly CSS Reference from the pop-up menu.

 
About CSS style properties

The Cascading Style Sheets specification (CSS1), which is controlled by the World Wide Web Consortium, defines the CSS style properties (for example, font, color, padding, margin, word spacing) that control the appearance of Web page elements. You can set any CSS1 property using Dreamweaver.

In Internet Explorer 4.0 and later, you can use a scripting language such as JavaScript or VBScript to change the positioning and CSS style properties of elements after the page has loaded. In Netscape Navigator 4.0 and later, you cannot change CSS style properties after the page has loaded, but you can change positioning properties.