Creating a Cascading Style Sheet

Creating a Cascading Style Sheet

Cascading Style Sheets are becoming the predominant method of formatting a Web site. A Cascading Style Sheet (CSS) is style information that can be referenced by individual or multiple Web pages. A CSS contains style definitions, called Selectors, which are the HTML components linked to a specialized list of style properties and values. A selector is followed by those properties and values. For example, H1 { font-size: x-large; color: green} , H2 { font-size: large; color: blue). H1 and H2 are selectors that modify the formatting properties of standard HTML tags. There are three types of Cascading Style Sheets in FrontPage: embedded (for a individual Web pages), external (for multiple pages in the same file), and the rarely-used inline, which you create when you apply a style directly to an item using the Style button on its Properties dialog box. An external CSS file uses a .css file extension.

Create an External Cascading Style Sheet

Click the New button list arrow on the Standard toolbar, and then click Page.

Click the Style Sheets tab.

Click the type of CSS you want to create.

• Normal Style Sheet. The basic style to which you can add your own styles.

Click OK.

Click the Save button on the Standard toolbar, type a name, select the CSS Files format, and then click Save.

To add styles, use the Style Toolbar.

See Also See "Applying and Creating Styles" on page 96 for information on creating an embedded cascading style sheet.

Link a Cascading Style Sheet to Web Pages

In the Folder list, select the Web pages in which you want to link to a CSS.

Click the Format menu, and then click Style Sheet Links.

Click the Selected Page(s) option.

Click Add.

Locate and select the cascading style sheet (.css) file.

Click OK.

To the order of use of multiple styles for a page, click the Move Down or Move Up buttons.

To remove a style sheet, select it, and then click Remove.

When you're done, click OK.

Did You Know? You can delete a style. Open the Web page or .css file with the style you want to delete, click the Format menu' click Style, click the List list arrow, click User-Defined Styles, select the style, click Delete, and then click OK. You can enable or disable CSS. Click the Tools menu, click Page Options, click the Authoring tab, select or clear the CSS 1.0 (formatting) check box, select or clear the CSS 2.0 (positioning) check box, and then click OK.