Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
CSS Code Hinting in Dreamweaver

Create a New Style Sheet in the CSS Styles Panel

When you click the New CSS Rule icon (shown in the margin) at the bottom of the CSS Styles panel, the New CSS Rule dialog box opens. The New CSS Rule dialog box combines features for defining styles for existing style sheets and creating a new style sheet.

You can use the New CSS Rule dialog box to add new styles to an existing CSS style sheet file. But you can also use the New CSS Rule dialog box to create a new CSS style sheet file. The latter creates a brand-new CSS style sheet file.

Follow these steps to create a new style sheet from the New CSS Rule dialog box:


Open the New CSS Rule dialog box open.

Choose Tag from the Selector Type drop-down list.


Choose Body from the Selector Name drop-down list to create a body tag style for your new style sheet.

Nearly every style sheet includes a body tag style that defines the font, font color, and page background for the entire page.

Later you can create additional styles, but the body tag is almost always a good place to start when creating a new style sheet.


In the Rule Definition area, specify where your rule will be defined by choosing New Style Sheet File.

Later, when you add additional styles to the CSS file, you will select the open CSS file from this same drop-down list.


Click OK in the New CSS Rule dialog box.

The Save Style Sheet File As dialog box appears.


Click the Site Root button to save the file in the root folder for your Dreamweaver Site and enter a filename.

Dreamweaver supplies the .css filename extension automatically.


Leave the Relative To drop-down list set to Document.

This option defines a reliable and efficient link between the style sheet file and the open HTML page.


Click Save.

The CSS Rule Definition dialog box opens.

You’re ready to define your first style in Dreamweaver. But because the CSS Rule Definition dialog box has so many options, we explore them next. For now, you can save your style sheet file without defining the body tag properties.

blog comments powered by Disqus
How to Apply CSS3 Effects and Transforms in Dreamweaver
Nine Basic CSS Categories to Use in Web Design
How to Grab Colors with ColorZilla’s Eyedropper for CSS3 Sites
CSS3 Properties
How to Create a Master CSS File