Troubleshooting.

The first question most people ask is, why doesn't my style work or only seems to partly work? Possible reasons are:

• You forgot to put a semicolon at the end of one of the style attributes in the definition. (This is by far the biggest cause.)
• You forgot to put in a closing brace ("}").
• You misspelled one of the attributes.
• The style doesn't work with that HTML element.
• You have defined the style later in your documents so the cascade replaced the one you had.
• You didn't define it for the element.
• You have an underscore ("_") in the name.

What is a style?

A style tells how an element in an electronic document will be presented on the screen, or printed, or pronounced. Styles may be in-line (defined in the element itself or with the use of <div> or <span> tags), embedded (defined in the head of the document within the style element), or external (defined in a separate text document with a "css" file extension.)

What is a style sheet?

A style sheet is a text file containing style definitions. The file has a "css" extension and is linked to your main page in the header.

Why is it called a "Cascading" style sheet?

The browser starts at the "farthest away" reference, which is an external style sheet if linked, and gets the styles. Then it goes to embedded styles and gets those styles. Then it goes to the inline styles and gets those. As it moves through the style definitions, it keeps adding new definitions it finds, or replacing ones if that were defined earlier. It's like a cascade (or flash flood if you are from Oklahoma.)

What is a class?

A style can be defined for an HTML element, for example the paragraph (<p></p>) element. But sometimes you want the paragraph element to look different depending on where it is on the page. Maybe you need some of the paragraphs indented while some are not. In these cases, classes allow you to have a different style. In the style sheet, a class definition starts with "." (period).

Let's say you define a style that will indent your text by 1 em, single space at paragraph marks, and will have a size 85% of the current default. You decide to name it "ss85pct1". If you want to be able to apply it to any element in your your document, you would define it in the style sheet ".ss85pct1" (Notice the leading period). If you wanted it to only apply to the "P" element, you would name it as "p.indent1". To apply that style to your element, you would use the the class attribute, e.g., <p class="indent1">

What is a psuedoclass?

You can only apply one class to each element, but with the various states of active, visited, and hover for the anchor (<a></a>) element, you need to be able to distinguish between them. In this case, you would define the various states for a style, say called "nav", as nav:visited or nav:active or nav:hover.

Revision A

Last Maintained 08/23/03