Working with cascading style sheets



Working with cascading style sheets

Cascading style sheets give you more control over the appearance and presentation of your pages. Using cascading style sheets, you can extend the ability to precisely specify the location and appearance of elements on a page and create special effects. You can also make your site more accessible for visitors with specialized browsers or output devices.

The contents of a style sheet

A cascading style sheet (CSS) defines the styles that you can apply to pages or page elements. Each style definition, or style rule, consists of a selector followed by the properties and values for that selector. The following are simple examples of style rules defined in a style sheet:

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

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

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 ( ; )

Using cascading style sheets, you can set a wider range of properties than using standard HTML alone, including:

• Font effects, such as small caps and expanded character spacing.

• Paragraph properties, such as indentation, line spacing, and spacing before or after.

• Borders and shading properties, such as boxes and background colors.

• Positioning properties, such as text wrapping around page elements, absolute or relative positioning of page elements.

Use a style sheet with a page

There are three ways you can use style sheets on pages in your web:

• Link a page to an external style sheet.

• Create an embedded style sheet on a page.

• Apply inline styles to individual page elements.

Each method has advantages and disadvantages:

• Use an external style sheet when you want to apply the same styles consistently across some or all pages in your web. By defining styles in one or more external style sheets and linking them to pages, you ensure consistency of appearance throughout those pages. If you decide to change a style, you need only make one change — in the external style sheet — and the change will be reflected in all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as Mystyles.css.

• Use an embedded style sheet when you want to define styles only for the current page. An embedded style sheet is a type of cascading style sheet that's "embedded" within the tags of a page. Styles in an embedded style sheet can be used only on that same page.

• Use inline styles to apply cascading style sheet properties to individual elements on a page.

If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will either extend or override properties specified in the external style sheet.

Create or edit a style sheet

FrontPage 2000 now includes templates that you can use to create external style sheets for a web. You can start with a blank template or one that already contains a set of styles (for example, Arcs). When you save the style sheet, FrontPage uses the .css file name extension. To edit the style sheet, double-click it in the Folder List.

When you create or modify a style for a page using the Style command on the Format menu, FrontPage automatically creates an embedded style sheet (if it doesn't already exist), and saves the style as a class selector within the embedded style sheet.

You can use the Style dialog box to create new class selectors, modify or delete existing ones, or apply CSS formatting properties to standard HTML tags such as . When you click OK to close the dialog box, FrontPage writes the formatting characteristics back to the external or embedded style sheet using the proper syntax. Or, you can simply type the style information in proper CSS syntax. To type style information for an embedded style sheet, click the HTML tab in Page view.

If you select the Apply using CSS check box for a theme applied to a web, FrontPage creates an external style sheet named Theme1.css in the root of your web, where Theme is the name of the theme. If you modify the theme, FrontPage writes the changes back to the theme CSS automatically. You can also modify the theme by directly editing the theme CSS.

Use a style sheet

To use the styles in an external style sheet on a page, you link the page to the style sheet using the Style Sheet Links command on the Format menu. You can link one or several style sheets to the current page in Page view, the pages selected in the Folder List, or all of the pages in your web.

The Style box lists standard HTML tags, such as Heading 1, as well as any class or ID selectors contained in an embedded style sheet or external style sheet linked to the page. To apply a style to a page element, select it and click the style or selector in the Style box.

In Microsoft FrontPage 2000, some formatting features are now automatically applied as inline styles. For example, if you apply a box around a normal paragraph using the Borders and Shading command on the Format menu, FrontPage writes the formatting information as an inline style attribute for the paragraph tag (for example, ). However, some attributes will be applied using CSS, others using HTML. If you want to apply inline styles using only CSS, apply a class or ID selector or an inline style using the Style button in the page element's Properties dialog box.

Enable or disable cascading style sheets

If a style feature is unavailable (that is, it appears dimmed), or if you do not want to use cascading style sheets in order to ensure compatibility with older browsers, you need to enable or disable specific versions of CSS. FrontPage uses CSS to implement the following style features:

• Font command (Format menu): Some font effects on the Font tab, and expanding or condensed spacing on the Character Spacing tab.

• Paragraph command (Format menu): Indentation and Spacing options.

• Borders and Shading command (Format menu): All border and shading options.

• Position command (Format menu): All positioning options.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download