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
Accessing 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.
-
To access the CSS Styles tab, from the Window menu, select CSS Styles
OR
Press [Shift] + [F11]
The CSS Styles tab appears.
Understanding 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.
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.
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 an existing external CSS style sheet |
 |
Create a new embedded or external CSS rule |
 |
Edit an existing CSS style |
 |
Delete an existing CSS rule |
