This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Using the CSS Styles Tab

Setting up a page for Cascading Style Sheets (CSS) may be overwhelming, but you can master this seemingly complicated process by using Dreamweaver's CSS Styles tab to create and modify CSS styles in Dreamweaver. This document describes accessing and using the CSS Styles tab, the tool that you will use to create and define CSS styles.

For more information on the advantages of CSS and types of CSS styles, see Overview of Cascading Style Sheets

return to topAccessing the CSS Styles Tab

Before you can begin creating CSS styles, you need to open the CSS Styles tab. After you have accessed the CSS Styles tab, you can begin creating and applying styles in embedded styles sheets or external style sheets.

  1. To access the CSS Styles tab, from the Window menu, select CSS Styles
    OR
    Press [Shift] + [F11]
    The CSS Styles tab appears.
    CSS Styles pane

return to topUnderstanding the CSS Styles Tab

The CSS Styles tab toggles between two different views: Apply Styles and Edit Styles. To use Cascading Style Sheets effectively, it is important to understand and become comfortable using both of these views.

Apply Styles View

The Apply Styles window lists the different custom styles that have been applied to a web page or to specific elements on a web page. In the Apply Styles window, styles are identified by name, which is preceded by an icon indicating the style type (external or embedded). This information can be helpful if you have multiple custom styles assigned to the same document.

Apply Styles view

Use the Apply Styles view to apply existing styles to elements on the web page. For more information on applying styles, see Applying Styles.

NOTE: If you have not yet defined any CSS styles, the Apply Styles view will only show one entry: No CSS Style. As you define custom styles, those styles are added to the view.

Edit Styles View

The Edit Styles window lists all of a web page's CSS styles and their characteristics. The style names are listed in the left column of the Edit Styles window, and their corresponding descriptions are listed on the right. Use the Edit Styles window to modify existing styles. If you add a new style, it will automatically be added to the list.

Edit Styles view

CSS Styles Toolbar

In addition to the Apply Styles and Edit Styles windows, the CSS Styles tab also features a toolbar for attaching, creating, editing, and deleting the various CSS styles.

Button Function
Attach style sheet button Attach an existing external CSS style sheet
New CSS Rule button Create a new embedded or external CSS rule
Edit Style button Edit an existing CSS style
Delete CSS Rule button Delete an existing CSS rule
Excellence. Our Measure. Our Motto. Our Goal.