Using Inline Styles

Inline styles are styles that are applied directly to an HTML tag and override both external style sheets and embedded style sheets. Inline styles are applied using the <style> tag followed by the style attributes in a semicolon delimited list.

The following code sets the style on one particular hyperlink using an inline style:

 <p>This <a style="text-decoration: overline underline;           font-family: Tahoma;           border: 1px solid #800000;"  href="test_link.htm">link</a> is formatted with an inline style.</p> 

The <a> tag has a style attribute that formats the hyperlink as an inline style. To format an HTML element with an inline style

1. Open CSSTest.htm.

2. Select one or more words in Design view.

3. Select Insert, Hyperlink.

4. Link the text to the URL of your choice.

5. Click the Style button (see Figure 19.12).

   Figure 19.12. The Style button in the Insert Hyperlink dialog box inserts an inline style.

   

6. Select Format, Font in the Style dialog box.

7. Change the font formatting to suit you.

8. Click OK three times to commit your change.

If you don't have a Style button in the Insert Hyperlink dialog box, see "Style Button Is Missing" in the "Troubleshooting" section of this chapter.

Your hyperlink is now formatted with an inline style as shown in Figure 19.13. If you review the code in Code view, you will see that FrontPage added a style attribute to the <a> tag and populated it with the correct attributes according to your selections in the Modify Style dialog box.

Figure 19.13. This hyperlink is formatted with an inline style, but the page is formatted with embedded and external styles.

NOTE

Previous versions of FrontPage had a Style button in almost every dialog box. FrontPage 2003 places more emphasis on external style sheets and embedded styles, but the Style button is still on many dialog boxes. Anytime you use the Style button in a dialog box, FrontPage will insert an inline style.

Another way that FrontPage will insert an inline style is when editing layers or when setting absolutely positioned elements.

1. Create a new page in FrontPage.

2. Type the word Anywhere! onto the page.

3. Place the insertion point on the same line as the word you just typed and select Format, Position to display the Position dialog box, as shown in Figure 19.14.

   Figure 19.14. The Position dialog box lets you specify an element's position on the page.

   

4. Click the Absolute box in the Positioning Style section.

5. Click OK.

If the Position menu item is not enabled, see "Position Menu Is Not Enabled" in the "Troubleshooting" section of this chapter.

You now have a layer that can be absolutely positioned by dragging the label on the layer as shown in Figure 19.15. When you drag the layer, FrontPage writes inline styles into the <div> tag, as seen in Figure 19.16.

Figure 19.15. This layer can be dragged anywhere, and FrontPage uses inline styles to position it.

Figure 19.16. FrontPage inserts an inline style to position the layer.

For more information on creating and positioning layers, see "Using Layers," p. 499.

Inline styles do not cascade into nested tags. This means that if you apply an inline style to a <p> tag and that tag contains an <a> tag, the <a> tag will not take on the properties of the <p> tag. If you want to format the entire paragraph with an inline style, you will have to apply the style to both the <p> and the <a> tags.