Apply Styles


After completing this topic, you will be able to apply styles in a web page.


Steps:

  1. Select both the Portrait and Landscape paragraphs.

     

    Click in the Portrait paragraph.

    Step 1

  2. Press the [Shift] key and click in the Landscape paragraph.

    Step 2

  3. When applying a paragraph style to multiple, consecutive paragraphs, you do not have to select the entire paragraphs as long as you have selected some text in each paragraph.

    Step 3

  4. Use the Styles list on the toolbar to apply the Paragraph with no margins style from the Styles list.

     

    Click the Styles list.

    Step 4

  5. Click the Paragraph with no margins - Paragraph list item.

    Step 5

  6. After applying a style, the style name appears in the Styles box when you click in a selection.

     

    Also notice the style name and settings in the Style Inspector.

    Step 6

  7. Format the style of the Orientation heading.

     

    Click in the Orientation heading.

    Step 7

  8. Once you have defined a paragraph as a heading, you can apply heading styles if the linked style sheet contains heading styles.

     

    This web page links to the Standard style sheet, which contains a heading style for each heading level.

    Step 8

  9. Use the Styles list on the toolbar to apply the Blue Verdana Heading 2 style from the Styles list.

     

    Click the Styles list.

    Step 9

  10. Since the text is assigned as a Heading 2 element, only Heading 2 styles (and Text styles) are available in the Styles list.

    Step 10

  11. Click the Blue Verdana Heading 2 - Heading 2 list item.

    Step 11

  12. Notice the color and font of the Orientation heading.

     

    The name of the applied style appears in the Selected category of the Style Inspector.

     

    The style added the attributes for a blue text color and a Verdana, Geneva, sans-serif font family to the Orientation heading.

    Step 12

  13. We have applied the Blue Verdana Heading 2 style to the other headings.

    Step 13

  14. Use the Styles list to apply a yellow highlight text style to the word shorter in the Portrait paragraph.

     

    Double-click in the shorter text.

    Step 14

  15. Click the Styles list.

    Step 15

  16. Click the Yellow highlight - Text list item.

    Step 16

  17. We have clicked off the selection to show the results of the style change. Notice the yellow highlighting.

    Step 17

After completing this topic, you are able to apply styles in a web page.

Table of Contents  Start Topic