About styles

Microsoft Office FrontPage 2003

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 that you create.

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

ShowUsing styles with page elements

You can choose from several categories of styles.

  • Paragraph-level styles    A paragraph-level 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>.

    ShowExamples

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

    A paragraph-level style formatted to show a border around text

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

    A paragraph-level style with the addition of a border around an image

  • Character-level styles    A character-level style applies to just the text within a paragraph.

    ShowExample

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

    An example of a character-level style

  • 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.

    ShowExample

    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.

    Table with styles applied

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.

ShowAbout cascading style sheets

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 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, and #footer is an ID selector.

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.