Applying Style Sheets to Multiple Pages

So far you ve learned how to create a style sheet for a single page. But what if you want multiple pages, or even all the pages in your Web site to use the same style definitions? Can you do this without having to define the style sheet separately in each page? Yes, you can.

The best way to apply style definitions to multiple pages is to use a linked style sheet. With linked style sheets, you store the style definitions in separate files and reference the style sheet file in the pages that should use them. Not only does a linked style sheet make it easy to apply style definitions to multiple pages, but it also provides a single location for managing the style definitions. To make changes, you simply edit the contents of the linked style sheet ”you don't have to edit each affected Web page.

When you work with linked style sheets, you'll need to create a style sheet, then link the style sheet to pages that should use it. FrontPage makes the process of creating and linking style sheets fairly easy. You can use any of the available style sheet templates as starting points. You can also copy previously created style definitions into your style sheets.

Creating Style Sheets from Templates

To create a style sheet from a template, follow these steps:

1. Click the down arrow to the right of the New tool on the Standard toolbar, then select Page.

2. In the Page Templates dialog box, click the Style Sheets tab.

   • To start with an empty style sheet, select the Normal Style Sheet template, then click OK.

   • To start with a predefined style sheet, select any of the other templates available, then click OK.

3. Any existing style definitions are listed in the page, as shown in Figure 6-4. The Style toolbar is also displayed. If you want to create new style definitions, or modify or delete existing style definitions, click the Style button in the Style toolbar.

   
   Figure 6-4: Any existing style definitions for the template are listed as the text of the style sheet.

4. To list User-defined styles, select this option for List. You can then modify an existing style by selecting it in the Styles list and clicking Modify.

5. To define additional styles for other HTML tags, select the HTML Tags option for List, click the selector that you want to use in the Styles list, then click Modify.

6. To define a new style class, click New, then define the class, as discussed in the section of this chapter entitled Using Style Classes.

7. When you are finished creating style definitions and classes, click OK to close the Style dialog box.

8. Press Ctrl+S to save the style sheet. When prompted, select a save location and file name for the style sheet.

Note  

All style sheets are saved as CSS (Cascading Style Sheet) files with the .css extension. If you later want to open the style sheet you just saved, press Ctrl+O; then, in the Open File dialog box, select CSS Files (*.css) as the file type, or look for files with the .css file extension in the file list.

Creating Style Sheets Using Previous Definitions and Classes

Any style definitions and classes you ve created previously using the techniques discussed in the section of this chapter entitled Getting Stylish: The Essentials can be copied into a linked style sheet and used with multiple pages. If you plan to copy existing style definitions into a linked style sheet, follow these steps:

1. Click the down arrow to the right of the New tool on the Standard toolbar, then select Page.

2. In the Page Templates dialog box, click the Style Sheets tab, select the Normal Style Sheet template, then click OK.

3. Open the page in which you previously made style definitions for editing.

4. Click Code. Near the top of the page, you ll see a begin style tag <style>, followed by markup for your style definitions, and completed with the end style </style>.

5. Select and then copy the style definitions without the begin and end style tags.

   Aha!  

   Cut and Paste In-Page Style Definitions into Linked Style Sheets
   If you re confident that you want to use linked style sheets, rather than the in-page style definitions, cut the style definitions using Ctrl+X, then paste them into the style sheet with Ctrl+V. Afterward, be sure to save the page so that the in-page style definitions aren t used the next time you publish the page.

6. Click Window, then select the new style sheet template you just created.

7. Press Ctrl+V to paste the style definitions you previously copied into the template.

8. Press Ctrl+S to save the style sheet. When prompted, select a save location and file name for the style sheet. All style sheets are saved with the .css extension.

Linking Style Sheets

The best way to manage links to linked style sheets is to use the Folder List view. If Folder List view isn t shown, press Alt+F1. In Folder List view, you can link style sheets to all the pages in your site at once or you can create links to any pages you select. To create links to style sheets, follow these steps:

1. Select the pages that you want to use linked style sheets. You can select multiple pages using Ctrl or Shift. You don t need to do this if you want all pages in the Web site to use the style sheet.

2. Select Format, Style Sheet Links. In the Link Style Sheet dialog box, the All Pages or Selected Page(s) button is selected automatically, based on whether you previously selected pages in the Folders List view.

3. The URL field shows any current style sheet links. Select any style sheets that you don't want linked, then click Remove.

4. Click Add, then use the Select Style Sheet dialog box to select the style sheet you want to use.

5. If you want to use additional style sheets, you can add those as well. The first linked style sheet always has the highest precedence, meaning its settings override the settings of other linked style sheets.

6. Click OK. FrontPage will then add style sheet links to the appropriate pages in the Web site.

Removing Style Sheet Links

If you no longer want to use style sheets, you can remove the links to the style sheet by completing these steps:

1. In the Folder List view, select the pages that you want to stop using linked style sheets. You can select multiple pages using Ctrl or Shift. You don t need to do this if you want all pages in the Web site to stop using style sheets.

2. Select Format, Style Sheet Links. In the Link Style Sheet dialog box, select the style sheet to remove in the URL list, then click Remove. Repeat this step as necessary to remove other style sheet links.

3. Click OK.