With FrontPage, you can choose from a group of built-in styles, or you can create your own user-defined styles. Built-in styles are frequently used formatting options available by default in the Style box. User-defined styles can be modifications to built-in styles, or class selectors (class selector: In cascading style sheets, a name identifying a user-defined style. Depending on how it's defined, a class selector can be used with a single type of tag or with any HTML tag inside the BODY element.) that you create.

You can access both built-in and user-defined styles from the same style list when you're editing a page.

You can choose from several categories of styles.

• Paragraph-level styles    A paragraph-level (paragraph style: A combination of character- and paragraph-formatting characteristics that are named and stored as a set. You can select a paragraph and use the style to apply all of the formatting characteristics to the paragraph at one time.) style is usually applied to start and end paragraph tags (<p>) and can affect any text contained between those tags. In addition, a paragraph-level style can also be applied to other tags, such as <div>.

  Examples

  The item below represents a paragraph-level style with the addition of a border around text.

  

  The graphic below represents a paragraph-level style with the addition of a border around an image.

  

• Character-level styles    A character-level style (character style: A combination of any of the character-formatting options that are identified by a style name.) applies to just the text within a paragraph.

  Example

  The text shown in the example below has three words in bold and red — the result of a character-level style being applied.

  

• Page element styles    Some page elements have a Style button on their properties dialog box. Those styles allow you to add styles specific to that particular page element.

  Example

  The table in the following example has a blue outset border, which is the result of a style being added through the table property options.

  

Note  If you apply a user-defined style to a page element that is already formatted with a standard HTML tag, both formatting characteristics are used.

For example, if you select a paragraph styled as Heading 1, and then apply a user-defined style named .redbg that adds a red border, you get the standard Heading 1 formatting (Times New Roman, Bold, 24 pt, and left-aligned) surrounded by a red border.

The class name of the user-defined style is appended to the end of the HTML tag in the Style box, listing the new style as Heading2.redbg.

A Cascading Style Sheet (CSS) is used to apply consistent style information across multiple Web pages. A CSS contains style definitions that describe the styles you want to apply to pages or page elements. Each style definition consists of a selector (selector: In a cascading style sheet style definition (or style rule), the HTML element linked to a particular set of style properties and values.) followed by the properties and values for that selector.

The following are examples of style definitions defined in a CSS:

H1 { font-size: x-large; color: green }

H2 { font-size: large; color: blue }

.note { font-size: small }

#footer { font-family: serif }

In the example, H1 and H2 are selectors that modify the formatting properties of standard HTML tags. The selectors' properties and values are contained within the curly braces { } — font-size is a property, and x-large is the value of the font-size property. You can specify multiple properties for a selector by separating each with a semi-colon ( ; ). In the example, .note is a class selector (class selector: In cascading style sheets, a name identifying a user-defined style. Depending on how it's defined, a class selector can be used with a single type of tag or with any HTML tag inside the BODY element.), and #footer is an ID selector (ID selector: In a cascading style sheet style definition (or style rule), a selector that is used to define a style for an individual page element, usually as an inline style.).

FrontPage primarily deals with two types of cascading style sheets — embedded and external — although a third type, inline, is occasionally used.

• Embedded cascading style sheet    When you create or modify a style to be used on a single page, FrontPage creates a cascading style sheet for you. Called an embedded cascading style sheet, it is a collection of code stored between HTML <STYLE> tags between the <HEAD> tags of the page. Any style you create for that page is stored in the embedded style sheet as a class selector.

• External cascading style sheet    External cascading style sheets are the most useful because they can be attached to multiple Web pages. You can apply the same styles consistently across an entire Web site.

  If you decide to change a style, you need only make one change — in the external cascading style sheet — and the pages in your Web site will reflect the change. Typically, an external style sheet uses the .css file name extension, such as Mystyles.css.

• Inline cascading style sheet    A third type of cascading style sheet, inline, contains user-defined styles that are applied to a single page element. This type of cascading style sheet is usually created when you add styles using the Style button on a page element's Properties dialog box.