MS Explorations | MS Academics | Middle School | The American School in Japan

A Cascading Style Sheet (CSS) is, in its simplest form, a way to format text and position elements on HTML pages. However, style sheets are much more powerful in that they can provide information for printers and aural (speech synthesizers and sound effects) devices. Style sheets are governed by two specifications: CSS1 and CSS2. Current versions of Netscape, Opera, Mozilla, and Internet Explorer browsers are mostly compliant, although don't be surprised to find a few bugs.

Top • Hints • Troubleshooting • Basics • Resources

Helpful Hints

• Define dimensions using "em" and "%" if how the page looks on the screen is important as these are relative measurements. Pixels can work on the screen as well, but only use them if you know what the effect will be for various screen resolutions.
• Points, centimeters, and inches are only good if you are trying to control the printed look.
• Don't try to get style sheets to work properly for any version of a browser released before 2002. You'll go nuts and it still won't work.
• Don't use an underscore ("_") in your style sheet name or in the name of any style. Due to a bug in Internet Explorer, styles for some elements will not work properly.
• You can't start a style definition with a digit; it must be a letter.

Top • Hints • Troubleshooting • Basics • Resources

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.

 

Top • Hints • Troubleshooting • Basics • Resources

Basics

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.

Top • Hints • Troubleshooting • Basics • Resources

Resources

W3Schools.Com CSS Tutorial

The W3Schools is a quick way to get started with Cascading Style Sheets provides tutorials in many areas, not just Cascading Style Sheets.

The World Wide Web Consortium's CSS Home Page

The World Wide Web Consortium® (W3C) developed the specification and here is the logical place to find links to many resources.

Learning Cascading Style Sheets - Online Resources

From W3C comes a list of various resources for learning about style sheets.

Dave Raggett's Introduction to CSS

Also at W3C, this provides a nice color chart and many helpful hints.

W3C Cascading Style Sheet Validator Service

The W3C also provides a validator service to help determine if your style sheets meet the standards.

Cascading Style Sheets Level 1 Specification

Cascading Style Sheets Level 2 Specification

These official specifications for Cascading Style Sheets are definitely not recommended for the faint-hearted.

Top • Hints • Troubleshooting • Basics • Resources

Revision D

Last Updated 12/11/03