Applying styles


    You can apply styles to text and other objects in one of three different ways, depending on the style type:

    • Element styles apply automatically to the HTML tags that share the element style names.
    • Class styles require that you select text or other items in the page and apply the style with the CSS palette or the inline CSS Style preview. The CSS palette lists all available class styles defined in a page's internal or external style sheets. The inline CSS Style preview displays the Style Apply tab of the CSS palette inline for selected text.
    • ID styles require that you apply the style in layout using the Visual Tag Editor or manually in the page's Source Code Editor.

To apply a class style:

  1. Do one of the following:
    • To apply the style to an object on a page, select the object, including text, table, table cell, image, or markup tree tag.
    • To apply a style to the entire body of a page, select the <body> tag in the markup tree at the bottom of the page, and then use the <body> option (as explained in step 2).
  2. Do one of the following:
    • In the CSS palette, select a formatting option adjacent to the class style's name.
    • Choose Type > CSS > [format].
    • Choose Type > CSS Style, and then select the formatting option in the inline pane that appears. (You can also preview styles by placing the pointer over a formatting option.)

    Note: The options in the CSS palette and the CSS commands in the Type menu vary depending on the selection in the document window. For example, if text is selected, the CSS palette displays Inline, Par, and Div options. If a table cell is selected, the palette displays one option for the <td> tag.

    You can choose from the following formatting options:

    Inline Style or <span> (CSS palette)

    Formats an item inline.

    Block Style (CSS palette)

    Creates a division that is disconnected from the normal flow of HTML.

    <p> (CSS palette)

    Formats an entire paragraph with a style. You don't need to select the entire paragraph; either place an insertion point in the paragraph or select a portion of it.

    <body> (CSS palette)

    Applies a style to the entire body of a page. If this option isn't listed in the CSS palette, select the <body> tag in the markup tree at the bottom of the page, or place an insertion point anywhere in the Layout Editor, except inside a table or layer.

    Specific HTML tags (CSS palette)

    Apply the style to a selected object, such as a table cell, image, or layer. For example, the <td> tag for a table cell, the <img> tag for an image object, and the <div> tag for a layer.

    For more information on naming HTML element styles to format tables and table content, see Formatting tables and table content with cascading style sheets.

    Applying a style to a paragraph and another style to a selection of table cells
    Applying a style to a paragraph and another style to a selection of table cells

To apply an ID style:

  1. In the Layout Editor, select the text, paragraph, or object to which you want to assign the ID and do one of the following:
    • If the text to be reformatted is a portion of the text within a paragraph, Press Ctrl+Shift+E (Windows) or Command+Shift+E (Mac OS) to open the Visual Tag Editor. Type SPAN ID=[myID] or DV ID=[ myID] within the brackets.
    • Click the Source Editor tab and locate the highlighted source code for the selected item. Add the ID style name (without the pound (#) symbol) as an attribute to the selected item's start tag. For example, if the ID style name is #headerbox, and we want to apply it to the entire paragraph, we would edit the code as follows:
        <P ID="headerbox">Welcome to TravelEZ</P>
  2. View the effect in the Layout Preview.