Add Style Rule Dialog Box

Article
10/12/2006

The Add Style Rule dialog box makes it possible for you to define CSS styles for elements, and CSS CLASS and ID styles, and then insert them into an external style sheet. To open the Add Style Rule dialog box, choose Add Style Rule from the Styles menu.

Note The Styles menu, whose options include Add Style Rule and Build Style, appears when you open an external CSS style sheet for editing. You also can open the Add Style Rule dialog box by right-clicking a <STYLE> in the Style Organizer when an HTML document is open, or by clicking the Add Style Rule icon in the Style Organizer.

Element
Select an element from the drop-down list and click the add () button to add the element to the Style Rule Hierarchy. For example, if you select H1, the following blank CSS style for all instances of that element is inserted:

H1 {}

Class Name
Type a class name and click the add () button to add a global style class to the Style Rule Hierarchy. A global style class is a named set of CSS style attributes that you can use to format various elements. For example, if you select Class Name and type clsGreeting in the field, the following blank CSS style for all elements assigned to CLASS="clsGreeting" is inserted

.clsGreeting {}

This style will format all elements assigned to CLASS="clsGreeting."

Note A period is automatically added before the name of the style class. You need not type this period yourself.

Optional Element
Select Optional Element to assign a style class to an element. For example, if you wanted to create a style class to be applied to certain <INPUT TYPE="button"> elements, then you could select Class Name, type clsButton in the field, and select INPUT as the Optional Element, to insert the following blank CSS style:

INPUT.clsButton {}

This style will format all INPUT elements explicitly assigned to CLASS="clsButton."

Element ID
Type an element ID and click the add () button to add the element ID to the Style Rule Hierarchy. Individual elements can have distinct element IDs, which makes it possible for you to apply a style to one particular instance of an element rather than to all similar elements within a document. For example, if you select Element ID and type p12 in the field, the following blank unique style is inserted for the element on your page whose ID="p12":

#p12 {}

Note The pound (#) sign before the style selector is omitted when you call the style from an element ID. The style selector, used as the value for the ID, must begin with a letter and can include numbers.

Style Rule Hierarchy
Elements, class names, and element IDs that you add in the Add Style Rule dialog box appear in the Style Rule Hierarchy field in the order that you selected them, from top to bottom. You can rearrange entries by clicking the appropriate buttons, as shown in the following table:

To Select this button

Move an entry up the hierarchy

Move an entry down the hierarchy

Delete an entry from the hierarchy
Style Rule Preview
Previews the syntax of selectors that you have added to the Style Rule Hierarchy field. You cannot directly edit the contents of this field. Instead, the preview text is derived from the contents and order of selections in the Style Rule Hierarchy field.

Add Style Rule Dialog Box

See Also

Additional resources

To	Select this button
Move an entry up the hierarchy
Move an entry down the hierarchy
Delete an entry from the hierarchy