Open topic with navigation

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 numerous ways to create new style classes.

How to create a new style class from the Stylesheet Editor

1. Open the topic style sheet from the Content Explorer.

   The Stylesheet Editor opens.

2. In the upper-left corner of the Stylesheet Editor, make sure the Show Styles field is set to Show All Styles.

3. 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.

   

4. In the local toolbar, click .

   The New Style dialog opens.

5. Type a name for the new style class, without using spaces (e.g., CautionIndented).

6. Click OK.

   The new style class is added under the tag you selected.

7. Press CTRL+S or click to save your work.

How to create a new style class from the Styles window pane

1. Open a topic where you want to use the new style.

2. Place your cursor on the topic 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.

3. Select View>Style Window or press F12 on your keyboard.

   The Styles window pane opens.

4. Click the Create Style button.

   The Create Style dialog opens.

5. In the Name field, type a name for the new style class, without using spaces (e.g., CautionIndented).
6. Select the appropriate style sheet(s) on the right side of the dialog (if the topic is associated with more than one style sheet).
7. 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.
8. 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.

9. Click OK.

10. Press CTRL+S or click to save your work.

How to create a new style class from the topic content

1. Open a topic where you want to use the new style.
2. If the tag block bars are not already shown, click at the bottom of the editor to display them to the left of the topic content.

3. Hover over the appropriate tag bar next to the topic content that you want to use as a foundation for your new style. When the cursor becomes a hand , click the bar.

   example

   If you 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.

4. In the popup menu, select Style Class>Create Style Class.

   The Create Style dialog opens.

5. In the Name field, type a name for the new style class, without using spaces (e.g., CautionIndented).
6. Select the appropriate style sheet(s) on the right side of the dialog (if the topic is associated with more than one style sheet).
7. 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.
8. 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.

9. Click OK.

10. 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