Creating a new CSS rule

You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by a class attribute.

To create a new CSS rule:

1. Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
   • In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.
   • Select Text > CSS Styles > New CSS Rule.
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 the Class option and then enter a name for the style in the Name text box.

     NOTE

     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 the Tag option and then enter an HTML tag in the Tag text box or select 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 the Advanced option and then enter one or more HTML tags in the Selector text box or select one from the pop-up menu. The selectors (known as pseudo-class 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, select New Style Sheet File.
   • To embed the style in the current document, select This Document Only.
4. Click OK.

   The Style Definition dialog box appears.

5. Select the style options you want to set for the new CSS rule.
6. When you are done setting style attributes, click OK.

For information on specific CSS style settings, see the following topics:

• Defining CSS type properties
• Defining CSS style background properties
• Defining CSS style block properties
• Defining CSS style box properties
• Defining CSS style border properties
• Defining CSS style list properties
• Defining CSS style positioning properties
• Defining CSS style extension properties

Related topics

• Using the CSS Styles panel
• Applying a class style
• Editing a CSS rule