Inline and embedded styles with tag selectors show up immediately without any further action on your part. FrontPage automatically applies the proper formatting to the specified tags. Steps for getting your external and user-defined styles onto your pages follow.
Linking to an External Style Sheet
If you want your pages to adopt external styles (Styles An Introduction), you've got to link your HTML pages to the style sheet that you've created. The fastest way to do this is to open a Web page in Design view, locate the .css file in your folder list, and drag it into the document window.
However, you probably want to link multiple Web pages to a particular sheet. To do so, first pop over to Folder view (Fine-Tuning Hyperlink Properties). Select the page(s) that you want to follow the external style rules, and then select Format » Style Sheet Links. A Link Style Sheet dialog box opens (Figure 7-6).
-
If you want to link all the pages in your Web site to the style sheet, click the "All pages" radio button.
-
To link just those you've selected, click "Selected page(s)."
Then click Add and browse to the style sheet file. Select it and click OK. You can add as many style sheets to your site as you want.
Figure 7-6. You can link more than one style sheet to the same Web page(s). For instance, all three style sheets listed here will apply to whatever pages have been selected. If you have more than one style sheet, use the Move Up and Move Down buttons to pick the order in which you want browsers to follow the rules (that's important in cases where multiple style sheets contain conflicting rules). Styles in sheets higher on the list take precedence over those below. For more about how multiple sheets interact, see "Understanding Style Behavior" on Understanding Style Behavior at the end of this tutorial.
If a Web page you've linked to the style sheet is currently open in Design view, you'll immediately see it take on the new styles.
If you're linking multiple pages, some may already have links to style sheets. If they're all linked to the same style sheet(s), no problem. But if separate pages have different style sheet links, FrontPage can't handle the confusion. The program displays a confirmation prompt, asking if you want to overwrite existing links. The prompt gives you an option to cancel, continue, or examine a links report to see what links are in place. If you choose to continue, FrontPage overwrites links for all pages with the new style sheets you choose.
If you don't like the effect, or chose the wrong style sheet, unlink it. Return to the Link Style Sheet dialog box, select the style sheet, and then click Remove.
Applying a Class Style
FrontPage automatically applies any styles you associate with a tag, but when you create a user-defined style (Styles An Introduction), you must manually apply it to elements on your Web page. To do this, it helps to have the Style toolbar active (View » Toolbars » Style).
You can apply styles in various ways. It all depends upon the target element.
To apply style to textfor example, say you want to apply a rule to every snippet of text that describes one of your productsselect the characters or paragraph that compose a description, and then do one of the following:
-
Select the style from the Style drop-down list on the Formatting toolbar.
-
Select the style from the Style toolbar's Class drop-down list.
You can apply the style to only one selection at a time. In other words, if other types of text separate each product description, you won't be able to select all your product descriptions at once and apply the style. You'd have to select one chunk of text, apply the style, and repeat.
If the element is a picture, table, or layer, applying a style can be trickier. Try the method above, but if it doesn't work, you've got a couple other options:
-
Right-click and select the Properties option for the item, such as Picture Properties. Click the Style button in the Properties dialog box and make your selection from the Class drop-down list.
-
With the Style toolbar displayed, select the item. If an ID for the item appears in the toolbar's ID field (as in Figure 7-7), select it. Then select the style from the class drop-down list on the left.
An ID is a unique label for an item that lives inside its HTML tag. FrontPage often creates IDs automatically. If the item has no ID, you can assign one. For details on creating an ID, see the box "ID Your Elements" on Creating Actions in DHTML Adding Interactivity.
Figure 7-7. The Style toolbar helps you apply styles quickly. It also features an ID field to help you select individual elements. If you need more options than the toolbar offers, click the Style button on the right to open the Style dialog box.
Removing a Class Style
Perhaps you've grown bored with the pink boldface you've applied to the text throughout your site? The steps you need to take for removing a class style depend upon the element affected by the rule.
To remove a class style from text, select the text and select Format » Remove Formatting.
You must select all the text in order for this to work, even for a paragraph style. You can't just click inside a paragraph to remove a style (though that's all you need to do to apply one). You must select all the text the paragraph comprises.
To remove a class style from an image or table, right-click the object and then select the Properties option for the item, such as Picture Properties. Click the Style button in the Properties dialog box and delete the style from the Class drop-down list. Click OK to close and save settings in both dialog boxes. If that doesn't work, select the item, and then select Normal from the Style drop-down list.