Tutorial: Using FrontPage with Radio Weblogs
Using Cascading Style Sheets in your web site
Cascading style sheets (CSS) 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. This article will discuss the following 5 topics:
- Use a style sheet with a page
- Create or edit a style sheet
- How to use a style sheet
- Enable or disable cascading style sheets
- Linking to an External Style Sheet
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 only need to 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 mystyle.css. An external style sheet would look like this:
<HEAD>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</HEAD>
- 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 <HEAD> tags of a page. Styles in an embedded style sheet can be used only on that same page. An embedded style sheet would look like this:
<HEAD>
<style>
<!--
a:link { text-decoration: none: }
-->
</style>
</HEAD>
- Use inline styles to apply cascading style sheet properties to individual elements on a page. An inline style looks like this:
<p style="border-style: solid">
Note: 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 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 <H1>. 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.
How to 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 FrontPage, 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, <p style="border-style: solid">). 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.
To enable or disable these go to the Tools Menu, select Page Options and click on the Compatibility Tab. See my FAQ on why certain options appear grayed out.
Linking to an External Style Sheet
If you link a page to an external cascading style sheet in your web, the styles in that style sheet can be applied to any element on the page. Styles from a linked external style sheet are displayed in the list of available styles in the Style box.
- In Page view, open the page you want to link to the style sheet. On the Format menu, click Style Sheet Links.
- In the URL list, select the style sheets you want to link to the page.
If you look at the code in HTML View it will look like this:
<HEAD>
<link rel="stylesheet" type="text/css" href="sitestyle.css">
</HEAD>
Tips
- If the URL list doesn't contain any style sheets, click Add, and then in the Select Hyperlink dialog box, browse to the style sheet you want to add to the list, and then click OK.
- To link all of the pages in your web to the selected style sheets in the URL list, click All Pages.
- To remove a style sheet from the URL list, select it and click Remove.
- To change the cascading order of the style sheets in the URL list, select the style sheet you want to move, and then click Move Up or Move Down.
© Copyright 2003 David Berry.
Last update: 1/20/2003; 8:25:46 PM.
All products and company names mentioned herein are the trademarks of their respective owners.
Microsoft® and FrontPage® are registered trademarks of Microsoft Corporation in the United States and/or other countries.
|
