Using Cascading 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.

Types of CSS Available in Dreamweaver

There are 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.

Creating a new CSS style

Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

Method to create a new CSS style:

1. Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box:
   
   
   • In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
   • In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select New CSS Style.
   • Choose Text > CSS Styles > New CSS Style. The New CSS Style dialog box appears.
     
     
2. Define the type of CSS style you want to create:
   
   
• To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name field, enter a name for the style.
Note: Custom style (class) names must begin with a period and can contain any combination of letters and numbers. For example, .myhead1. If you don’t enter a beginning period, Dreamweaver automatically enters it for you.
• To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the pop-up menu.
• To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the pop-up menu. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.
  
  
3. Select the location in which the style will be defined:
   
   
   
   • To create an external style sheet, choose New Style Sheet File.
   • To embed the style in the current document, choose This Document Only.
   
   
   
4. Click OK. The Style Definition dialog box appears.
   
   
5. Choose the style options you want to set for the new CSS style.
   
   
6. When you are done setting style attributes, click OK.