Create a Style Sheet

Style sheets can be implemented as part of a Web page, or on a separate document that's linked to the page. The second method is better because you can attach the same document to other pages, establishing a common style for all of them.

To begin creating a style sheet, choose File, New, Page and then select the Style Sheets tab (Figure 42.2).

Figure 42.2. Creating a new style sheet.

Several of the style sheets from which you can choose have the same names as themes, and they define many of the same fonts, colors, and heading styles. (Cascading Style Sheets don't define navigational buttons or page banners, however.) Choosing a Normal style sheet gives you an empty file to add styles to.

Style sheets should be saved with the .css filename extension. You can place them in the main folder of your Web or any of its subfolders , such as the images subfolder.

Before you make any changes to a new style sheet, save it so you can link it to pages in the current Web. Choose Format, Style Sheet Links to create a link to a style sheet. You can link a page or the entire Web to the .css file that contains the style sheet.

Themes don't mix well with style sheets, especially when you're working on them for the first time. For the Webs you create during this chapter, remove all themes before linking any style sheets.

Once you've established a page's link to a style sheet, the page will automatically display those styles.

Edit a Style

To edit a style sheet, choose Format, Style with either a Web page or a .css file open in Page view. The Style dialog box will appear, as shown in Figure 42.3.

Figure 42.3. Editing a style sheet.

If you edit a style sheet from a Web page, the changes you make will be saved on that page only. Editing styles from a .css file enables you to make changes that apply to all pages linked to the style sheet.

Styles are associated with specific HTML tags. You can take an existing tag and establish a new style for how it is displayed on a Web page.

The Style dialog box can be used to display all HTML tags or just the user -defined styles ”tags that have new styles applied to them.

To see this in action, display all HTML tags in the Style dialog box and modify the kbd tag. This tag is used to apply the keyboard effect to text, which is one of the options you can select by choosing Format, Font while editing a Web page.

Clicking the Modify button opens the dialog box shown in Figure 42.4.

Figure 42.4. Modifying a style.

You can use the Format button on the Modify Style dialog box to make the following changes to how a tag is displayed on a Web page:

• Font ” The font, size, color , and other attributes of text

• Paragraph ” The spacing and indentation of paragraphs containing this text

• Border ” The border and shading that appear

• Numbering ” The way lists of this text are numbered and indented

These formatting changes can be applied to any element, although several options are best suited to text.

Choose a new font, color, and size for the kbd tag, and give it background shading. The changes you make will be reflected in the Preview section of the Modify Styles dialog box.

You also can change the positioning of the tag ”a feature called CSS 2.0 in FrontPage that is only supported partially in Internet Explorer 4.0 and higher. The formatting features described during this chapter are much more fully supported in current browsers.

When you modify a style directly from a .css page, FrontPage will display that style using the Cascading Style Sheets language in Page view. Don't edit this document manually unless you're familiar with CSS ”if you click Format, Style, you'll be making changes to this file as you work on a style sheet with the Style dialog box.

Apply a Modified Style to a Page

Once you've modified the kbd style, you can try it out in one of two ways:

• If you modified the style on a separate .css file, close and save that file. Open a Web page that has been linked to this style sheet.

• If you modified the style on a Web page, you're ready to apply the style to text.

Highlight text on a Web page and choose Format, Font to open the Font dialog box. Apply the keyboard effect to this text. On most browsers, the keyboard effect causes text to appear in a smaller, monospaced font such as Courier. The new style that was applied to kbd overrides this formatting in browsers that support Cascading Style Sheets. You'll see the text as it was formatted in the Modify Style dialog box.

If you make changes to the kbd style, they will be reflected immediately in all text that has been formatted with the keyboard effect.

Match Tags with FrontPage Features

Style sheets use HTML tags to identify elements of a Web page. If you're not familiar with HTML, you may not know how these tags are used on a Web page.

When you choose Font, Format to add a special effect, the following HTML tags are used:

• blink ” Blink effect

• cite ” Citation effect

• code ” Code effect

• dfn ” Definition effect

• em ” Emphasis effect

• kbd ” Keyboard effect

• samp ” Sample effect

• strike ” Strikethrough effect

• strong ” Strong effect

• sub ” Subscript effect

• sup ” Superscript effect

• u ” Underline effect

• var ” Variable effect

Several buttons on the Formatting toolbar can be used to format text. They're associated with the following HTML tags:

• b ” The Boldface button

• i ” The Italic button

• u ” The Underline button

• blockquote ” The Increase Indent button

The Formatting toolbar also has a pull-down menu with several formatting options that apply to entire paragraphs. They use the following HTML tags:

• p ” Normal

• pre ” Formatted

• address ” Address

• h1 through h6 ” Heading 1 through Heading 6

• ol ” Before and after a numbered list

• ul ” Before and after a bulleted list

• dir ” Before and after a directory list

• menu ” Before and after a menu list

• li ” For each item in a numbered, bulleted, directory, or menu list

• dl ” Before and after a defined term list

• dt ” For each term in a defined term list

• dl ” Before and after a definition list

• dd ” For each definition in a definition list

There are other HTML tags that FrontPage uses as you create Web pages, including a for hyperlinks , img for pictures, and applet for Java applets.

To determine the tags that are being used by FrontPage, create a new page that contains nothing but a single Web element. Switch to HTML mode for that page and you'll see the tag ”or tags ”used to create it.

Create a New Style

A style sheet can contain new styles that aren't directly associated with an existing HTML tag. These styles often are used to create styles that have been slightly modified from existing tags, as in the following styles:

• p ” A normal paragraph

• p.quote ” A paragraph that contains a quotation

• p.author ” A paragraph that identifies the author of the text

• p.contact ” A paragraph that indicates how to contact the author

You can give each of these styles a different appearance as a way to distinguish them from each other.

In FrontPage, the best way to create a new style is to base it on a paragraph tag that it is similar to, such as p for normal paragraphs or one of the heading tags, such as h3 .

To create a new style, choose Format, Style, and then click the New button to give the style a name. The first part of the name should be the tag the style is based on, followed by a period, followed by a unique name that describes what the style is used for. The p.quote , p.author , and p.contact styles are examples of this.

When you name a new style, it will show up on the list of user-defined styles like any other HTML tag you've customized. You can modify how it is formatted, just like any other style.

The best advantage to basing a new style on a paragraph tag is that it shows up in the Formatting toolbar along with the other options to format a paragraph. For example, if you created p.quote , p.author , and p.contact styles, they would show up in the pull-down menu as Normal.quote , Normal.author , and Normal.contact .