Open topic with navigation
You are here: User Interface Elements - How to Use Each One > Creating New Styles
Creating New Style Classes
After you create or import a style sheet, you can create new classes of a parent tag (or selector). However, you cannot create new parent tags. For example, <p> is a parent tag, as are <h1>, <a>, and <span>. You can create a class under any of those parent tags to give you more variety and flexibility when using styles in your content (e.g., p.Tip, p.Note, h1.IndexHeading). But you cannot use the Stylesheet Editor to create a new parent tag called, say, "MyTag" at the same level as the other parent tags; instead, it must be created as a style class under one of the existing parent tags.
There are multiple ways to create new style classes.
-
Open the topic style sheet.
The Stylesheet Editor opens.
-
In the upper-left corner of the Stylesheet Editor, make sure the Show Styles field 
is set to Show All Styles.
-
In the editor, find and click on a tag
(such as <p> or <li>).
Your new style will start out with the same properties as the tag that you choose. For example, if you are creating a style class for text to be used as a note of caution for your readers, you might decide that the <p> (paragraph) tag is most appropriate.
-
In the local toolbar, click 
.
The New Style dialog opens.
- Type a name for the new style class, without using spaces (e.g., CautionIndented).
-
Click OK.
The new style class is added under the tag you selected.
- Press CTRL+S or click
to save your work.
- Open the content file (e.g., topic, snippet).
-
Place your cursor on the content that you want to use as a foundation for your new style.
example
If you place your cursor on content that currently has the <p> tag applied to it, the new style will start out with the same property values as the <p> tag.
-
Select View>Style Window or press F12 on your keyboard.
The Styles window pane opens.
-
Click the Create Style button.
The Create Style dialog opens.
- In the Name field, type a name for the new style class, without using spaces (e.g., CautionIndented).
- Select the appropriate style sheet(s) on the right side of the dialog (if the topic is associated with more than one style sheet).
- The property values already applied to the content selected in the topic are shown (if any). If you do not want to include certain property values in the new style, click the check box next to the value (in the Include column) to remove the check mark.
- If you want the new style to immediately be applied to the content selected in the topic, select Create style and update the source element. If you do not want the new style to immediately be applied to the content selected in the topic, select Create style without updating the source element.
-
Click OK.
- Press CTRL+S or click to save your work.
- Open the content file (e.g., topic, snippet).
- If the tag block bars are not already shown, click
at the bottom of the editor to display them to the left of the content.
-
Right-click the appropriate tag bar next to the content that you want to use as a foundation for your new style.
example
If you right-click the <li> tag bar next to content in the topic, the new style will start out with the same property values as the <li> tag.
-
In the context menu, select Style Class>Create Style Class.
The Create Style dialog opens.
- In the Name field, type a name for the new style class, without using spaces (e.g., CautionIndented).
- Select the appropriate style sheet(s) on the right side of the dialog (if the topic is associated with more than one style sheet).
- The property values already applied to the content selected in the topic are shown (if any). If you do not want to include certain property values in the new style, click the check box next to the value (in the Include column) to remove the check mark.
- If you want the new style to immediately be applied to the content selected in the topic, select Create style and update the source element. If you do not want the new style to immediately be applied to the content selected in the topic, select Create style without updating the source element.
-
Click OK.
- Press CTRL+S or click to save your work.
Note: You can also import existing styles from another style sheet.
WHAT'S NEXT?
After you create a new style class, you can edit its properties (e.g., font, background, border).
See Also
Open topic with navigation
How to create a new style class from the Stylesheet Editor
