By David Berry

Summary: Learn how to use cascading style sheets to control the location and appearance of elements on a Web page, to specify individualized style sheets for specialized browsers and output devices, and to easily manage the presentation of elements across multiple pages. (11 printed pages)

Introduction

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 specify individualized style sheets for specialized browsers and output devices. Another advantage of using cascading style sheets on your Web site is the ability to reuse them across multiple pages. And by using an external style sheet, you can quickly change all the styles on your site by altering a single style sheet. This makes updating and maintaining your site much easier.

What is a Cascading Style Sheet?

The cascading style sheet is a recommendation of the World Wide Web Consortium (W3C). Level 1 of the cascading style sheet mechanism (CSS1) became a W3C recommendation in December 1996. It describes the CSS1 language as well as a simple visual formatting model. Cascading style sheets, level 2 (CSS2), which became a W3C recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (such as for printers, monitors, and aural devices), downloadable fonts, element positioning, and tables. The CSS Mobile Profile became a W3C candidate recommendation in October 2001.

A style sheet is a set of instructions that tells a browser how to present a particular type of HTML element. Each instruction consists of a selector, which tells a browser which elements in a page are affected by the particular rule, and a set of properties, which tells a browser how to present any elements that are specified in the selector.

Here are some simple examples of style definitions defined in a cascading style sheet:

h1 { font-size: x-large; color: green }
h2 { font-size: large; color: blue
.caption { font-size: small }
#footer { font-family: verdana, arial } 

In the example above, the h1 element and the h2 element 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. Multiple properties for a selector are separated with a semicolon.

In addition to selectors that link HTML elements to a particular style, there also are class selectors and id selectors.

A class selector is a stand-alone class to which a specific style is declared. The style of a class attribute can be associated with any HTML element. A class selector is created by a period followed by the class name. In the example above, .caption is a class selector, which identifies a user-defined style. In your HTML code, you would reference a class selector using the class statement:

<p class="caption">This element is associated with the caption class.</p>

Notice that although class selectors are prefixed with a period, you do not use the period when referencing them in a class statement.

It is a good practice to name class selectors according to their function rather than their appearance. The caption class in the example could have been named "small" but that would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

An id selector is individually assigned to define a style on a per-element basis. Using the id attribute, the declared style can be associated with only one HTML element per document to differentiate it from other elements. An id selector is declared by using the indicator #. In the example above, #footer is an id selector, which defines a style for an individual page element (usually as an inline style). This type of style would be referenced in HTML by the id attribute:

<p id="footer">This is the page footer and only this element will have this style.</p>

As with the class selector, you would not use the # symbol when referencing the style.

Three Types of Cascading Style Sheets: External, Embedded, and Inline

There are three ways that you can use style sheets on pages in your Web site:

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

External Style Sheets

Use an external style sheet when you want to apply the same styles consistently across some or all pages in your Web site. 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 to make only one change—in the external style sheet—and the change will be reflected in all pages that are linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as in Mystyle.css.

An external style sheet might look like this:

body { background: blue;
       color: white;
       font-family: times, serif;
       font-size: 10pt }
a:link { color: red }
a:visited { color: yellow }
h1 { font-family: arial, helvetica, sans-serif;
     font-size: 20pt;
     font-style: bold }

The HTML code for linking to an external style sheet would look like this:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

In addition to using an external style sheet by itself, you can add an imported style sheet. An imported style sheet is a sheet that can be imported to (combined with) another sheet. This allows the creation of one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. When you import partial sheets to the main sheet, a number of sources can be combined into one.

To import a style sheet or style sheets, include the @import notation or notations in the style element. The @import notations must come before any other declaration. If more than one sheet is imported, the style sheets will cascade in the order that they are imported. That is, the last imported sheet will override the next to last, etc. If the imported style is in conflict with the rules declared in the main sheet, then the imported style sheet will be overridden.

Here is an example of an external style sheet with an imported style sheet:

<link rel=stylesheet href="main.css" type="text/css">
<style type="text/css">
<!--
@import url(http://www.abc.com/style2.css);
@import url(http://www.abc.com/style3.css);
-->
</style>

Embedded Style Sheets

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 is "embedded" within the <HTML> tags of a page. Styles in an embedded style sheet can be used only on that page. An embedded style sheet looks like this:

<style>
<!--
body  { background: blue;
  color: white;
  font-family: times, serif;
  font-size: 10pt }
a:link { text-decoration: none: }
-->
</style>

Inline Styles

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">
<input size="20" style="text-align: right">

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

Inheritance

HTML documents are structured hierarchically. Style sheets follow this same structure. There is a top-level element (the parent element) followed by child-level elements that can inherit styles from their parent elements—for example, color or size. By letting the children inherit styles from their parents, a default style can be created for top-level elements and their children. The inheritance starts at the parent element and is passed on to its children and then their children, etc.

Inherited styles can be overridden by assigning specific styles to child elements. For example, if a default font size is assigned to the text, all tags related to text (such as bold, italic, etc.) will inherit the default font size assigned to the document. To override the default font size, the child element (bold element, italic element, etc.) must have its own style assigned to it.

For example, the following declaration will, by default, display all text in the document in a 10-point font:

body { font-size: 10pt }

Any formatted text will be based on this parent element, meaning that all text will be displayed in a 10-point font. Adding a style for a child element—in the following example, an h1 element—will override the parent element's style (a 10-point font) and display the child element in its own style (a 14-point font):

body { font-size: 10pt }
h1 { font-size: 14pt }

All text except for the h1 headings will be displayed in a 10-point font. The h1 headings will be displayed in a 14-point font. If the h1 element contains another element, then that element—for example, the bold (or "b") element—will also be displayed in a 14-point font. The b element will inherit the property of its parent element, which is h1. If you want to display the b element in some other font, then its own font properties must be declared—for example:

body { font-size: 10pt }
h1 { font-size: 14pt }
b { font-size: 15pt }

The b element will be displayed in a 15-point font. This example assumes that the b element is applied inside the h1 element, and therefore will inherit the h1 element's properties and not the body element's properties.

The declaration above will display all b elements in a 15-point font. If you want this specific font to be applied to b elements only if they are inside h1 and not for every occurrence of the b element, then the b element must take a form of a contextual selector:

h1 b { font-size: 15pt }

In the example above, the b element is a contextual selector. It will be displayed in the specified font only if it is found in the context of the h1 element.

Not all properties are inherited. One such property is background. However, because its initial value is transparent, the background of the parent element will be applied by default unless different background value is explicitly set.

It is important to keep the principles of inheritance in mind when creating your external, embedded, or inline styles to ensure that each element appears as you intended.

Creating or Editing a Style Sheet in Microsoft FrontPage

There are several ways to create a style sheet in the Microsoft FrontPage 2002 Web site creation and management tool. FrontPage includes templates that you can use to create external style sheets for a Web site. 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 and the style sheet will open in Normal view. If you want to edit your .css files in something other than FrontPage, such as Notepad or another editing tool, you can associate the .css extension with another program by clicking Tools, Options, and Configure Editors.

You also can create 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 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 cascading style sheet 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 cascading style sheet syntax. To type style information for an embedded style sheet, click the HTML tab in Page view.

You can also create or edit a cascading style sheet when working with themes. When you choose Format and Theme, and select the Apply Using CSS check box for a theme applied to a Web site, FrontPage creates an external style sheet named Theme1.css (where Theme is the name of the theme) in the root of your Web site. If you modify the theme, FrontPage writes the changes back to Theme1.css automatically. For more information about customizing style sheets in FrontPage themes, download the FrontPage 2002 Software Development Kit.

Using a Style Sheet on a Page

To use the styles in an external cascading style sheet on a page, 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 the pages in your Web site.

If you link a page to an external style sheet in your Web site, 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.

Linking a Style Sheet to a Page

In Page view, open the page that you want to link to the style sheet.

1. On the Format menu, click Style Sheet Links.
2. In the URL list, select the style sheets that you want to link to the page.
3. Click OK.
4. If you look at the code in HTML view, it will look like this:

   <link rel="stylesheet" type="text/css" href="sitestyle.css">

Tips

• If the URL list does not contain any style sheets, click Add. In the Select Style Sheet dialog box, browse to the style sheet that you want to add to the list and then click OK.
• To link all the pages in your Web site to the selected style sheets in the URL list, select 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 that you want to move and then click Move Up or Move Down.

  Note   The URL list is the order in which the style sheets will cascade, so be certain that the order you see is the order in which you want your style sheets to cascade.

  Caution   If you select All Pages in the Link Style Sheet dialog box, FrontPage will erase all style sheets that are on your pages and replace them with the new style sheet choices that you have selected. This can be a quick way to apply new styles to your entire Web site but can cause problems if you didn't intend to remove existing style sheets.

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.

Appling a Style to a Page Element

1. Select the desired page element.
2. On the Format menu, click Style.
3. In the Styles box, choose the desired style or selector.
4. Click OK to apply that style.

In FrontPage, some formatting features are 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">). Some attributes will be applied using cascading style sheets, while others will use HTML. If you want to apply inline styles using only cascading style sheets, apply a class or ID selector or an inline style using the Style button from the Format menu.

FrontPage allows you to quickly apply inline styles for the following options (all found on the Format menu):

• Font. This menu item contains some font effects on the Font tab and expanded or condensed spacing on the Character Spacing tab.
• Paragraph. This menus item contains indentation and spacing options.
• Borders and Shading. This menus item contains all border and shading options.
• Position. This menus item contains all positioning options.

If a style feature is unavailable (dimmed) from the Format menu or if you do not want to use cascading style sheets in order to ensure compatibility with older 3.x browsers, then you need to enable or disable specific levels of cascading style sheets. To enable or disable cascading style sheets:

1. On the Tools menu, click Page Options.
2. Click the Compatibility tab.
3. Check or uncheck CSS 1.0 and/or CSS 2.0 to enable or disable the associated level of cascading style sheet.

Creating a Custom Scroll Bar Using Cascading Style Sheets

As newer versions of browsers become available, Web site designers will find even more features of the cascading style sheet specification that they can use on their Web sites. For example, Microsoft Internet Explorer version 5 added a new ability to customize and add colors to the scroll bars on a Web site. An example might look like this:

body {
     scrollbar-arrow-color: #6C000E;
     scrollbar-base-color: #1D50AC;
     scrollbar-dark-shadow-color: #1D50AC;
     scrollbar-track-color: #2559AF;
     scrollbar-face-color: #FFCC66;
     scrollbar-shadow-color: #000000;
     scrollbar-highlight-color: #D9D9D9;
     scrollbar-3d-light-color: #FFCC66;
}

You can enter the colors using Web-safe color values as represented by regular color names (such as green, black, and red), hexadecimal values (such as #008000, #000000, or #FF0000"), or RGB values. Note that some older browsers may not support color names.

For help in creating style sheets for your own custom scroll bar, you can go to EchoEcho.Com and use the Custom Scrollbar tool to create the code that you need to put into your Web pages' <HEAD> section. Note that the custom scrollbar works only in Internet Explorer 5 or later.

Using Style Sheets for Specialized Browsers and Output Devices

When cascading style sheets were introduced in late 1996, they represented an exciting new opportunity. They enabled much more sophisticated page design (typography and layout) than Web site developers had been used to, and they also greatly simplified the process of making Web pages accessible to as many readers as possible, regardless of the device that they use to read a page and regardless of any disability they might have.

By using cascading style sheets, you can separate the content of an HTML document from the information about its presentation or style. This allows you to apply precise formatting and achieve the desired layout without using HTML code in a way that might confuse screen readers and specialized browser software.

An important assumption underlying the CSS1 recommendation was that Web pages were viewed using a personal computer with a monitor. But there are many more ways to access a Web page. And each of these different media has its own characteristics. It may be a small device with a monochrome display. It may be aural, reading Web page content aloud. It may be television-based, like the WebTV® service. Looking toward the future, we really have no idea what new Web access methods will be like.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside a single style sheet, you can have different declarations for printers, handheld devices, monitors, etc. Additionally, different style sheets can be imported depending on the medium used for browsing. An example of using a specialized declaration for an output device is the @media rule.

The @media rule is a subset of a style sheet specific to a particular type of medium or group of media. An @media rule specifies the medium or media to which it applies, and contains a number of statements exactly like the statements we usually find in a style sheet. These statements apply only when a Web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They are made up of:

• The keyword @media
• A list of media types, separated by commas
• The statements to be applied to this group of media, contained inside curly braces ({})

For example, the following rule applies a white background and black text color to the body of page when it is being printed or displayed on a handheld device:

@media print, handheld { background: white; color: black }

In designing a Web site for different devices and accessibility, the CSS2 recommendation provides for the following media types:

all
   Suitable for all devices.

aural
   Intended for speech synthesizers.

braille
   Intended for Braille tactile feedback devices.

embossed
   Intended for paged Braille printers.

handheld
   Intended for handheld devices (small screen, monochrome, limited bandwidth).

print
   Intended for paged opaque material and for documents viewed on screen in Print Preview mode.

projection
   Intended for projected presentations (for example, projectors or printing to transparencies).

screen
   Intended primarily for color computer screens.

tty
   Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities (authors should not use pixel units with the tty media type).

tv
   Intended for television-type devices (low resolution, color, limited scrollability).

Although the @media rule provided above as an example is a simple one, it illustrates how easily cascading style sheets can be used to start making your site more accessible. So if you have been putting off accessibility improvements for your Web site, think of this as an opportunity and not an obstacle. To learn more about cascading style sheets and accessibility, check out the Web Accessibility Initiative (WAI) from the World Wide Web Consortium. W3C provides links to more than 30 accessibility evaluation tools and free Web-based validation services for both HTML and cascading style sheets.

Conclusion

Adding cascading style sheets to your Microsoft FrontPage Web site offers you a great deal of flexibility in the look and design of your layout. Embedded style sheets allow you to alter the elements of particular pages. By using an external style sheet, you can quickly update the look of your entire Web site or make your site more universally accessible.

Also, a site based on cascading style sheets is much easier to manage than an HTML-only site. Style changes made to a .css file are applied throughout the site without the need to alter any of the site's HTML files. Using cascading style sheets also reduces the overall size of each HTML file, because all the style information is stored in the .css file.

A comprehensive list of CSS Attributes can be found in the MSDN Library.