Creating and Applying Generic Style Classes

In addition to creating classes that are specifically associated with parent styles, you can create generic classes. These are standalone classes that can be used with any parent style.

A generic class can be very useful if you need to apply the same formatting to several pieces of content, even if they have different HTML elements (parent styles).

How to Center Content With a Generic Style Class

Let's create a generic class selector for centering content. This type of style can be used only on a block element.

  1. Open Styles.css.
  2. In the local toolbar, click .

  3. In the New Selector dialog, from the HTML Element drop-down, select (generic). Then in the Class Name field, type Center. Click OK.

    Note Alternatively, when using the New Selector dialog to add a new selector, you can leave the HTML Element field empty. If left blank, the new style class defaults to "generic," and is placed under the "Generic Classes" section in the stylesheet.

  4. From the Styles drop-down, select All Styles.

  5. In the left pane tree structure, expand (Generic Classes), and select Center.

  6. In the Show drop-down, select Show: All Properties.
  7. Expand the Block group.

  8. Next to the text-align property, click Display more options., and select center.

  9. Click Save the active file. to save your work.

  10. Open Introduction.htm.

  11. Right-click the p structure bar to the left of the image, and from the context menu select Style Class > .Center.

    Note The <img> tag uses a character-level style, so the image can't be centered itself. In this case, the image is within the block-level <p> tag, so we can apply the style class to the p element (p.Center).

  12. Click Save the active file. to save your work.

How to Indent Content With a Generic Style Class

Let’s create another generic style class for indenting text.

  1. Open Styles.css.
  2. In the local toolbar, select click .

  3. In the New Selector dialog, from the HTML Element drop-down, select (generic). Then in the Class Name field, type Indent. Click OK.

  4. In the left pane tree structure, make sure (Generic Classes) is expanded, and Indent is selected.
  5. In the Show drop-down, make sure Show: All Properties is selected.
  6. Expand the Box group.

  7. In the margin-left property field, type 50px. Press ENTER.

  8. Click Save the active file. to save your work.

  9. Open South-by-Southwest.htm.
  10. At the end of the existing content, create an empty paragraph.

  11. Copy and paste this example text to the line:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

  12. From the Home ribbon, Style drop-down, select .Indent. The text indents.

  13. Click Save the active file. to save your work.

  14. From the Window ribbon, select Close All Documents.

Note This tutorial covers a few basic styles. Keep in mind that when creating a style class there are multiple ways to do it. Ask yourself what the style is that you need, and how often do you plan to use it? For example, if you plan to apply a bold font property to character-level content only, then creating a specific span element might work. But if you plan to apply bold font at the block-level too, then creating a generic style class might make more sense. How you go about creating a style really depends on what you are trying to accomplish.