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.
- 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
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
- 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.
Cascading Style Sheets - Online Resources
- From W3C comes a list of various resources for learning about style
- Dave Raggett's
Introduction to CSS
- Also at W3C, this provides a nice color chart and many helpful
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
- Cascading Style Sheets Level
- These official specifications for Cascading Style Sheets are definitely
not recommended for the faint-hearted.