Built-in and user-defined stylesA style is a set of formatting characteristics identified by a unique name. Styles enable you to quickly format a whole group of page elements in one simple task.
You can apply styles to most page elements in Microsoft FrontPage, including text (individual characters or entire paragraphs), graphics, and tables.
Built-in and user-defined styles
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.
Using styles with page elements
Paragraph-level styles A paragraph-level style, such as a border, usually applies to text, but it can affect any page elements contained between the HTML paragraph (<P>) tags.
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 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.
What is a cascading style sheet?
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 simple examples of style definitions defined in a CSS:
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.
Style formatting is stored in cascading style sheets
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 the HTML <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 linked 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.