 |
Applying styles
- HTML element styles apply automatically to the HTML tags that share the style names.
- Class styles require that you select text or other items in the page and apply the style with the CSS palette. The CSS palette lists all class styles in a document's internal or external style sheets.
- ID styles require that you apply the style manually in the page's Source Code Editor.
You can apply styles to text and other objects in one of three different ways, depending on the style type:
To apply a class style:
- Select the text, table, table cell, image, markup tree tag, or other object to host the style.
- In the CSS palette, select one of the following options adjacent to the class name:
- To apply the style to selected text in a paragraph, select in the Span column.
- To format an entire paragraph with a style, place an insertion point in the paragraph, and then select in the Par column.
- To create a division that is disconnected from the normal flow of HTML, click in a paragraph and then select in the Div column.
- To apply a style to the entire body section of a page, click to select the <body> tag in the markup tree at the bottom of the page or click the page icon in the upper left corner of the page. Select a style under the <body> column in the CSS palette.
- To apply the style to a selected object, such as a table cell, image, or floating box, click in the respective HTML tag column. For example, the <td> tag for a table cell, the <img> tag for an image object, and the <div> tag for a floating box.
Note: The options in the CSS palette will vary depending upon 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.
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
To apply an ID style:
- In the Layout Editor, select the text, paragraph, or object to which you want to assign the ID.
- Click the Source Editor tab and locate the highlighted source code for the selected item and then do one of the following:
- If the text to be reformatted is a portion of text within a paragraph, you must enclose the portion of text in a pair of <SPAN> or <DIV> start and end tags and then add the ID style as an attribute to the start tag. For example, if the ID name is #headerbox and you want to apply the style to the TravelEZ text, edit the code as follows:
- 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:
- View the effect in the Layout Preview.
<P> Welcome to <SPAN ID="headerbox">TravelEZ</SPAN></P>
<P ID="headerbox">Welcome to TravelEZ</P>