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