Working with External Style Sheets

An external style sheet consists of a .css file containing code that defines styles for HTML elements and CSS classes. A CSS class is a named set of styles that can be applied to an HTML element by using the class attribute of the HTML tag.

For more information on CSS classes, see "Creating and Using CSS Classes," p. 401, in this chapter.

FrontPage provides the ability to create external style sheets either from preexisting templates or from scratch. External style sheets based on a template are created using the More Page Templates link in the New task pane. You click the Style Sheets tab and select a style sheet template. FrontPage will provide a brief description of the formatting that the style sheet will provide, as seen in Figure 19.1.

Figure 19.1. The Page Templates dialog box provides a brief description of each style sheet template.

graphics/19fig01.gif

Interestingly enough, a preview is only provided for the Normal Style Sheet template that, because it is a blank style sheet, simply previews as a blank white page. However, you do get a general idea of how the style sheet will format a page from the description given.

If you don't have a Style Sheets tab in the Page Templates dialog box, see "Style Sheets Tab Is Missing" in the "Troubleshooting" section of this chapter.

If you choose a template other than the Normal Style Sheet template, you can modify any one of the styles provided or create your own styles to add to it. If none of the provided templates suit your needs, create your own style sheet from scratch by selecting the Normal Style Sheet template.

For the most part, styles are applied to pages in the order in which they are encountered. For this reason, embedded style sheets are placed after the <link> tag (if present) that links to an external style sheet so that the embedded styles override the styles defined in the external style sheet. Inline styles override styles defined in an embedded or external style sheet because an inline style is applied directly to the HTML tag itself. Any style applied to a particular HTML tag also applies to any child tags of that tag. For example, if you format the <body> tag with a CSS style, that style will apply to the entire page unless it is overridden by another style.

TIP

Netscape 4 has a problem with applying styles from parent tags. If you are designing a page that is going to be viewed in Netscape 4, make sure to test carefully and apply the style to all necessary selectors individually.

This process of cascading styles is how the term Cascading Style Sheets came about, but there are exceptions. Suppose, for example, you have a style in your external style sheet that formats the a selector and you don't want an embedded style sheet to override your style. You can add the ! important statement to the style in your external style sheet to give it priority over the style in the embedded style sheet. Your external style sheet style will then appear as follows:

 a  { color: blue; text-decoration: none; ! important }

If a page linking to the external style sheet also has an embedded style sheet that includes a style for the a selector, the style in the external style sheet will still take precedence because of the added weight given to it by the ! important statement. However, if the embedded style sheet also uses the ! important statement when defining the style for the a selector, it will override the style in the external style sheet.

Creating an External Style Sheet

The best way to understand external style sheets is to create a new style sheet and use it to experiment with formatting a page. FrontPage's default Frequently Asked Questions page is the ideal page to use for this purpose because it contains many HTML elements by default. To create a new Frequently Asked Questions page

Select File, New and click the More Page Templates link in the New task pane.
Select the Frequently Asked Questions template.
Click OK to create the page.
Save the page as CSSTest.htm.

Now you will need a new blank style sheet that will be used to format the CSSTest.htm page. Create a new style sheet.

Select File, New and click the More Page Templates link in the New task pane.
Click the Style Sheets tab.
Select the Normal Style Sheet template.
Click OK to create the style sheet.
Save the style sheet as style.css.

The first thing you will likely notice is the Style toolbar (shown in Figure 19.2) that is floating in Design view. Using this toolbar, you can easily edit your style sheet. Click the Style button on the Style toolbar to display the Style dialog box as shown in Figure 19.3. Using the Style dialog box, you can easily start building your style sheet.

Figure 19.2. The Style toolbar floats above your page when editing style sheets in FrontPage.

Figure 19.3. The Style dialog box makes easy work out of creating style sheets.

graphics/19fig03.gif

If you don't see the Style toolbar, see "Style Toolbar Isn't Visible" in the "Troubleshooting" section of this chapter.

In the left side of the Style dialog box is a list of some of the HTML tags to which a style can be applied.

TIP

You can change this list so that it contains only styles that you have defined by selecting the User-defined styles option in the List dropdown seen below the list of styles.

The Style dialog box also includes a preview of your style sheet applied to a sample paragraph and sample characters. This preview is not precise, but it's a good estimation of how the style will look on your page.

The Description box on the Style dialog box provides you with instructions on how to use the dialog box when no styles are defined for the selector that is selected in the Styles list. If a style is defined for the selector, the Description box will provide you with a rundown of the style's attributes as seen in Figure 19.4.

Figure 19.4. The Description box provides an overview of the selected style.

graphics/19fig04.gif

Three buttons on the Style dialog can be used to edit your style sheet. The New button allows you to create a new style for a selector that is not already listed in the Styles list. You can use this to create a new style for an unlisted HTML tag, or you can use it to define a new CSS class. (We'll cover CSS classes later in this chapter.) The Modify button allows you to modify styles that already appear in the Styles list, and the Delete button allows you to delete a style that was previously applied to a selector.

Apply a style to the hyperlinks in CSSTest.htm as follows:

Select the a:active pseudo-selector.
Click Modify to display the Modify Style dialog box as seen in Figure 19.5.

Figure 19.5. The Modify Style dialog box allows you to modify the style of a selector in one place.
Click Format and then click Font to display the Font dialog box as shown in Figure 19.6.

Figure 19.6. The Font dialog box provides access to the font style settings for your style.
In the Font list, scroll down to Arial and select it.
In the Size list, select 10pt.
In the Color dropdown, choose a red color.
Click OK twice to apply the style. Note that the Description box now indicates the style's settings and the Styles list now only contains the a:active pseudo-selector.

NOTE

After you modify a style for the first time, the Style dialog box displays only the user-defined styles until you select HTML Tags from the List dropdown. After you modify subsequent styles, the Styles list will continue to display all HTML tags to make editing other styles easy.
Select HTML Tags in the List dropdown.
Select the a:link pseudo-selector.
Click Modify to modify the style.
Click Format and then click Font.
In the Font list, scroll down to Arial and select it.
In the Size list, select 10pt.
In the Color dropdown, choose the same color that you chose for the a:active pseudo-selector.
Check the No Text Decoration check box.
Click OK twice to apply the style. The Styles list now contains an entry for the a:active pseudo-selector and the a:link pseudo-selector.
Select the a:visited pseudo-selector and click Modify.
Repeat steps 11 16, only select a color slightly lighter than the red color you chose previously.
Format the a:hover pseudo-selector using the same settings you used for the a:link pseudo-selector, but instead of checking the No Text Decoration check box, check the Underline check box.
Click OK in the Style dialog box to apply the CSS styles to the style sheet.
Select File, Save to save your new style sheet.

Your CSS file should now look similar to the file in Figure 19.7. Save the changes to the style sheet.

Figure 19.7. This style sheet applies styles to hyperlinks.

graphics/19fig07.gif

You might be wondering why you modified the a:hover pseudo-selector last instead of modifying them in the order in which they appear in the Styles list. The reason is that, as previously mentioned, styles cascade. The a:link pseudo-selector applies to all hyperlinks. Therefore, if the a:link pseudo-selector appears below the a:hover pseudo-selector, it will override the a:hover pseudo-selector.

If you review the CSS code that FrontPage generated, you will see how straightforward CSS really is. The following CSS properties were set by the changes you made in the Modify Style dialog box:

font-family The font-family property sets the font used to render the selector. The equivalent HTML element is the face attribute of the <font> tag.
font-size The font-size property sets the size of the font used to render the selector.
color The color property sets the color of the font. It can be expressed using hex values, RGB values, or named values. In the FrontPage-generated CSS file, it is expressed in hex values.
text-decoration Specifies the decoration for the text. Can be set to none, underline, overline, line-through, or blink. (blink is not supported in Internet Explorer.)

Using these four CSS properties, you have transformed your hyperlinks from the boring defaults to interactive, customized hyperlinks.

Applying an External Style Sheet to a Web Page

Before you add any more styles to the style sheet, now is a good time to apply the style sheet to the CSSTest.htm page. An external style sheet is applied to a Web page by linking it to the page using a <link> tag. FrontPage provides a convenient method for linking an external style sheet to a Web page.

Open CSSTest.htm.
Select Format, Style Sheet Links to display the Link Style Sheet dialog box as shown in Figure 19.8.

Figure 19.8. The Style Sheet Links dialog box makes it easy to link your external style sheet to one or more pages.
Click the Add button to add a new style sheet link.
Select style.css and click OK.
Make sure that the Selected Page(s) radio button is selected and click OK to apply the style sheet link.

You should see the changes to CSSTest.htm applied immediately in Design view. Switch to Preview view or preview the page in your browser and hover over the hyperlinks to see your styles in action.

Adding More Styles to the Style Sheet

When modifying the hyperlink styles, you might have noticed that an a selector appeared in the Styles list in addition to the a:link, a:hover, a:visited, and a:active pseudo-selectors. The a selector represents any HTML <a> tag. In the CSSTest.htm file, there are several HTML bookmarks so that when a user clicks on a question in the FAQ list, it will take him to the correct spot in the file. HTML bookmarks are configured with <a> tags, but they aren't hyperlinks because they don't really link to anything. Therefore, these bookmarks are not affected by the selectors that you've already formatted. To affect the bookmarks, you will need to apply a style to the a selector:

Open the style.css file.
Click the Style button on the Style toolbar.
Select HTML Tags in the List dropdown.
Select the a selector and click Modify.
Click Format and click Font.
Scroll to Arial in the Font list and select it.
Select 10pt in the Size list.
In the Color dropdown, select the same red color that you used for the a:link pseudo-selector.
Click OK twice to commit your change.
Click OK to apply the style to the style sheet.

Your style sheet should now resemble the page in Figure 19.9.

Figure 19.9. Your style sheet now has formatting for all `a` selectors.

graphics/19fig09.gif

You should now have a good idea of just how powerful CSS is. If you decide to reformat hyperlinks at a later time, changing their format is as easy as changing the CSS file. Without using an external style sheet, you would have to open each page and change it individually. If you were dealing with a site with hundreds of pages in it, formatting with CSS can make an otherwise arduous task quite easy.

NOTE

The Class and the ID dropdowns on the Style toolbar are disabled when modifying selectors that are HTML tags. These dropdowns will be used later when you learn about CSS classes.

Figure 19.1. The Page Templates dialog box provides a brief description of each style sheet template.

Creating an External Style Sheet

Figure 19.2. The Style toolbar floats above your page when editing style sheets in FrontPage.

Figure 19.3. The Style dialog box makes easy work out of creating style sheets.

Figure 19.4. The Description box provides an overview of the selected style.

Figure 19.5. The Modify Style dialog box allows you to modify the style of a selector in one place.

Figure 19.6. The Font dialog box provides access to the font style settings for your style.

Figure 19.7. This style sheet applies styles to hyperlinks.

Applying an External Style Sheet to a Web Page

Figure 19.8. The Style Sheet Links dialog box makes it easy to link your external style sheet to one or more pages.

Adding More Styles to the Style Sheet

Figure 19.9. Your style sheet now has formatting for all a selectors.

Figure 19.9. Your style sheet now has formatting for all `a` selectors.