line
Advanced style-sheet techniques
line

If you are acquainted with the concepts of HTML tags and style sheets, you can design your Web pages more freely by using classes and IDs; by embedding styles directly into each tag; or by using an external style file. This section introduces an example that use classes to change the color of a paragraph and the color of text in the paragraph.

Vocabulary Vocabulary class

A definition of Web page style. You can assign one class to multiple HTML tags, so you do not have to define the same style several times. You can, for example, assign the same class both to a table and to text.


Vocabulary Vocabulary ID

A definition of Web page style. You can embed one ID to only one HTML tag, so you must define the same style several times. Because you can use classes for more general purpose than IDs, it is recommended that you use classes rather than IDs.


  1. Click the icon icon to create a new Web page.

  2. Type any text.

    A paragraph with text

  3. Click anywhere on the text using the right mouse button, and select Extended Attributes from the pop-up menu to display the "Extended Attributes" dialog box.

  4. Type "color" in the Class field, and click the Edit (2) button to display the dialog box for setting the style.

    Tip Tip You can type any text you like in the Class field.

    dialog box

    Tip Tip Using the Style Definition dialog box, you can define such styles as fonts, layouts, and colors. Define them as you like.

  5. Click the Color and Background tab and select the text color from the Color list box and the paragraph color from the Background Color list box.

    Color and Background tab

  6. Click the OK button to return to the Extended Attributes dialog box.

  7. Click the OK button to change the paragraph and text colors.

    Color changes

  8. Click the style icon icon to display the Style Sheet Manager, which enables you to view all the styles defined for the Web page being edited. In the following example, a class named "color" is defined.

    manager

  9. Click Show current style status to view the style for each HTML tag in the Web page being edited.

    manager

    Tip Tip You can define classes and IDs from the Style Sheet Manager. Click Help under Show current style status and read the displayed help topic.