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

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. In the HTML or JSP file's Design page, focus on the element to which you want to apply the class style.

  2. Select Style > Edit Style Rule from the element's pop-up menu.

  3. In the Edit Style dialog box, select the Class option. Provide a name for the class in the Class name field. You can toggle the >> Preview Properties and Hide Properties << buttons to see class style definitions and hide them. 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.

  4. Click OK.

  5. Add specific style definitions using the Add Style dialog box.

  6. Click OK to save changes and apply the style class to the element in focus. The class name that you have specified is displayed in the Styles view.

  7. 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 Toolbar > Style to show the Style toolbar. You can apply a class style to focused element by selecting a class name from the drop-down list.

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