Defining and applying class and ID styles

If you want to specify the same style for multiple elements, use classes. By using a class, you can have the same style for different tags by associating the class with the tags.
Prerequisite: Create a style sheet.

By associating multiple classes to each occurrence of the same tag, you can achieve different styles for the same tag.

To create and apply a class style:

  1. Open the .css file that you want to edit by double-clicking the file in the Project Explorer view. The style sheet opens in the editing area.
  2. To create a class style:
    1. Click the New Style Rule Picture of the Add Style Rule icon icon. The Set Selector of New Style dialog box opens.
    2. Select the Class radio button. Provide a name for the class in the Class name field. The name must begin with a period, for example .note The ID option has almost the same effect as the Class option. The only difference is that you can apply an ID to only one place (one occurrence of a tag) in a page. Therefore, it is recommended that you use classes rather than IDs. If you are using IDs, select the ID radio button and type the name in the ID field. The name must begin with a #.
    3. Click OK.
    4. Add specific style definitions using the New Style dialog box.
    5. Close the dialog box when you are done, and click Yes when prompted to save your changes. The class name that you have specified is displayed in the Styles view.
  3. To apply the class to an element:
    1. Select the element in the Design page of Page Designer.
    2. In the Properties view, click the Browse icon beside the Classes field. Picture of the Classes field in the Properties viewThe Select Class dialog box opens. Select Class dialog
    3. Select the class, and then click OK.
  4. To apply an ID style:
    1. Select the element you want to apply the ID style to.
    2. In the Properties view, click the All Attributes Picture of the All attributes icon icon.
    3. In the id field, type the id name (without a #).

      Picture of the id attribute in the Properties view

  5. In the same way, you can select other elements and apply the same class style. You can also apply a defined class style from the Style toolbar. From Page Designer, select Display > Toolbar > Style to show the Style toolbar. You can apply a class style to a focused element by selecting a class name from the drop-down list.
  6. To see the class definition being used in the style sheet, click the style in the Styles view. You can see the definition of the style in the Properties view.
Related concepts
Cascading Style Sheet (CSS) Designer
Related tasks
Defining styles
Specifying styles for predefined areas
Removing a specified style
Defining styles for an element
Defining pseudo-HTML link styles

Feedback