Understanding Cascading Style Sheets | Special Edition Using Microsoft Office FrontPage 2003

Web developers have long struggled over formatting Web pages. Let's face it. HTML, although a great layout language, is not designed to be a robust formatting language. Fortunately, Web developers need not struggle with HTML for formatting page elements. Cascading Style Sheets, or CSS, is now the standard for formatting Web pages. As you will see in this chapter, CSS is well suited to the task.

CSS also solves another problem that Web developers have to contend with, and that is site redesign. Today's Internet won't tolerate a Web site that never changes. In order to keep your site fresh and desirable, you have to redesign it from time to time. If all of your formatting is implemented inside of your HTML tags, redesigning is a hassle at best. CSS solves this problem because it separates your formatting from your content. If you want to change fonts and colors, for example, you simply change your style sheet and it changes the fonts and colors in all of your pages associated with the style sheet automatically. CSS can even be used to position your page elements right where you want them.

TIP

If you do use CSS to position page elements, make sure that you test your page in different browsers. Internet Explorer will usually display your page as you intend it to look, but other browsers might not. This is not due to FrontPage generating code that only works right in Internet Explorer as some might say. Instead, it is because not all browsers have full support for CSS positioning.

You can apply CSS formatting to your Web site in three ways; inline styles, embedded styles, and external styles. Inline styles are configured using a style attribute added to an HTML tag. Embedded styles are added to the HTML document usually inside of the <head> section. External styles are standalone CSS files with a .css file extension, and they are linked to an HTML file using a <link> tag.

Embedded style sheets and external style sheets share the same syntax. Listing 19.1 shows a partial listing of a style sheet.

Listing 19.1 A Typical Style Sheet

 a:link {     color: red;     text-decoration: none; } a:visited {     color: brick;     text-decoration: none; } a:hover {     color: red;     text-decoration: underline overline; } a:active {     color: blue; } body {     font-family: Book Antiqua, Times New Roman, Times;     background-color: white;     color: black; }

CSS files consist of one or more HTML elements, called selectors in CSS terminology, followed by CSS formatting commands enclosed in curly braces. The a selector is special in that it has several different states that can be formatted. These are referred to as pseudo-elements or pseudo-selectors. The first line of the CSS file in Listing 19.1 formats the a:link pseudo-selector, which represents an HTML <a> tag that is configured as a hyperlink. The a:link pseudo-selector represents an unvisited hyperlink that is not being clicked or hovered over, the a:visited pseudo-selector represents a hyperlink that the site visitor has already visited, the a:active pseudo-selector formats a hyperlink when the mouse button is being clicked on it, and the a:hover pseudo-selector formats a hyperlink when the mouse cursor is being hovered over it.

You can also specify multiple selectors. To use multiple selectors, separate them with commas. The following line of CSS formats both the a and the p selector:

 a, p  { font-family: Arial; font-size: 10pt; }

The text inside the curly braces is the CSS text that formats the selector indicated. In Listing 19.1, the CSS text formats the color of hyperlinks at different states, the text-decoration CSS property of hyperlinks, and the formatting of the <body> tag. You will learn about how this formatting works as you read this chapter.