Cascading Style Sheets FAQ
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
- 1. What are Cascading Style Sheets?
- A Cascading Style Sheet (CSS) is a list of statements that can assign various display
properties to HTML tags. Styles can be specified for a single tag instance,
multiple tags, an entire document, or multiple documents at once. Style
information can be collected for a tag from many locations, and from this
smorgasbord of styles (called a "cascading" of styles), a single
style is arrived at for use on an individual element.
2. Why do Style Sheets exist?
- SGML (of which HTML is a derivative) was meant to be a device-independent
method for conveying a document's semantic content (the meaning of the content.)
It was never meant to convey physical formatting information. HTML has crossed
this line and now contains many tags which specify style and formatting information.
One of the main reasons for Style Sheets is to stop the creation of new HTML
Physical Formatting tags and once again separate style information from
document content.
3. Why use Style Sheets?
- Style Sheets allow a much greater degree of layout and display control than has
ever been possible thus far in HTML. The amount of format coding necessary to
control display characteristics can be greatly reduced through the use of external
style sheets that are usable by an entire group of documents. Also, many style
sheets can be integrated from different sources to form a virtual cohesive tapestry
of styles for a document. Style Sheets are also backward compatible - They can be
mixed with HTML styling attributes so that older browsers can view content as intended.
4. Who defines the CSS standard? Is it one person? A company?
- The current "Cascading Style
Sheets Level 1" specification is authored and maintained by
Hakon Lie and Bert
Bos of the W3C (The same organization in charge defining
the HTML standards .) This specification is now a W3C recommendation, and new extensions
are being actively discussed in the W3C
www-style mailing
list discussion forum. Input is also received from the member companies that comprise the
W3C Consortium
(which include companies such as Apple, Microsoft, and Netscape along with over 150 others.)
5. What can be done with Style Sheets that can not be
accomplished with regular HTML?
- Many of the recent extensions to HTML have been tentative and somewhat crude
attempts to control document layout. Style Sheets goes several steps beyond,
and introduces complex border, margin and spacing control to most HTML elements.
It also extends the capabilities introduced by most of the existing HTML extensions.
Background colors or images can now be assigned to ANY HTML element instead of
just the BODY element and borders can now be applied to any element instead of just to
tables. For more information on the possible properties in CSS, see the Index DOT Html
Property Index.
6. Is there anything that CAN'T be replaced by Style Sheets?
- Quite a bit actually. Style sheets only specify information that controls display and
layout information. Virtual style tags that convey the NATURE of the content can not
be replaced by style sheets, and hyperlinking and multimedia object insertion is not
a part of style sheet functionality at all (although controlling how those objects appear
IS part of Style Sheets functionality.) The CSS1 specification has gone out of its
way to absorb ALL of the HTML functionality used in controlling display and
layout characteristics. For more information on the possible properties in CSS,
see the Index DOT Html Property Index.
Rule of Thumb: if an HTML tag gives cues as to
how it should be displayed, then some or all of its functionality has been absorbed
by Style Sheets.
7. How do I design for backward compatibility using Style Sheets?
- Regular HTML style methods (such as <font
SIZE> and <b>)
may be easily combined with Style Sheet specification methods. Browsers that do
not understand Style Sheets will use the older tag methods, and Style Sheets
specifications can control the appearance of these tags in browsers that support CSS1.
8. What browsers support style sheets? To what extent?
- Microsoft's Internet Explorer version 3.0 Beta 2 and above supports CSS, as
does Netscape Communicator 4.0 Beta 2 and above. Take note that neither of these
support ALL of the properties and syntax described in the full CSS1
specification. A few other implementations of CSS exist in browsers that are
not as widely-used (such as Amaya, Arena and Emacs-W3), but coverage of features
in these documents currently only covers Internet Explorer, NCSA Mosaic and
Netscape browsers.
9. Do any WYSIWYG editors support the creation of Style Sheets?
Any text-based HTML editors?
- The W3C has created a combination browser/WYSIWYG editor called
Amaya. One of its main
features is support for Cascading Style Sheets. It is only available for Sun/Solaris and
Linux UNIX systems presently. As far as I know, this is the only WYSIWYG editor to support
Style Sheets. Text editors are a different story - most of them allow a user to type the style
information manually, but few support guided Style Sheet creation yet. The only
editors that I KNOW of that help a user create Style Sheets are
HomeSite 2.0 and
HotDog 3.0 (both for the
Windows platforms.)
Please let me know if you know of any others.
10. Can you use someone else's Style Sheet
without permission?
- This is a somewhat fuzzy issue. As with HTML tags, style sheet information
is given as layout syntax. The language itself is not copyrighted, and the
syntax itself does not convey any content - only layout information.
It is not a great idea to reference an external style sheet on someone else's
server. Doing this is like referencing an in-line image from someone else's
server in your HTML document. This can end up overloading a server if too many
pages all over the net reference the same item. It can't hurt
to contact the author of a style sheet, if known, to discuss using the
style sheet, but this may not be possible. In any case, a local copy should
be created and used instead of referencing a remote copy.
11. What does the "Cascading" in
"Cascading Style Sheets" mean?
- Style Sheets allow style information to be specified from many
locations. Multiple (partial) external style sheets can be referenced to
reduce redundancy, and both authors as well as readers can specify style
preferences. In addition, three main methods can be employed by an author
to style information in HTML documents, and multiple approaches for style
control are available in each of these methods. In the end, style can be
specified for a single element using any, or all, of these methods. What
style is to be used when there is a direct conflict between style
specifications?
Cascading comes to the rescue. A document can have styles specified using
all of these methods, but all the information will be reduced to a single,
cohesive "virtual" Style Sheet. Conflict resolution is based on
each style rule having an assigned weight according to its importance in
the scheme of things. A rule with a higher overall importance will carry
a higher weight. This will be used in place of a competing style with a
lower weight/importance. A hierarchy of competing styles is thus formed
creating a "cascade" of styles according to their assigned
weights. The algorithm used to determine this cascading weight scale is
fairly complex.
For more information, see the section on cascading in the
CSS1
Specification or the Index DOT Html section
on the Style Sheet Cascade process.
12. Which style specification method
should be used? Why?
- The answer to this one is tricky. The short answer is: "it depends."
The long answer is, however, another story.
If you are planning on using more than one style specification method in
your document, you must also worry about Cascading Order of Style methods
(see question 11.) If you are going to use only one
method, then some guidelines about the nature of each method need to be
kept in mind. The answer to this question is also very much related to the
next question.
Method 1: External Style Sheets
(The LINK tag)
- This method should be used if you want to apply the same style to
multiple documents. Each document can reference the stand-alone
style sheet and each of the documents can use the styles contained
in the Style Sheet. Using this method, the appearance of many documents
can be controlled using a single style sheet. This can save a LOT
of time for an author.
- Method 2: Document Level Style Sheets
(The Style tag)
- The syntax used with Method 2 is the same as that for Method 1. This
method is a happy medium between External Style Sheets and Inline
Styles (see below.). It should be used in place of Method 1 if you
only want to specify styles for a single document. This method should
also be used when you want to specify a style for multiple tag types
at once or the list of style definitions is of larger size.
- Method 3: Inline Styles
(STYLE attribute to HTML tags)
- If you only have one or a few tags to apply style to in a single
document, your best bet is to use an Inline Style. This method
attaches a style definition within the HTML tag it is modifying.
13. What are the advantages/disadvantages of the various style methods?
- Each method of specifying style information has something going for it
(else it would not exist), but each method also has drawbacks as well.
This question is very closely related to the previous
question. These factors should be considered when planning your use
of Style Sheets.
External Style Sheets
- Advantages
- Can control styles for multiple documents at once
- Classes can be created for use on multiple HTML tag types in many documents
- All Selector grouping methods can be used to apply styles under complex contexts
- Disadvantages
- An extra download is required to import style information for each document
- The rendering of the document may be delayed until the External Style Sheet is loaded
- Becomes slightly unwieldy for small quantities of style definitions
- Document Level Style Sheets
- Advantages
- Classes can be created for use on multiple tag types in the document
- All Selector grouping methods can be used to apply styles under complex contexts
- No additional downloads necessary to receive style information
- Disadvantages
- This method can not control styles for multiple documents at once
- Inline Styles
- Advantages
- Useful for small quantities of style definitions
- Can override other style specification methods at the local
level so only exceptions need to be listed in conjunction
with other style methods
- Disadvantages
- Does not distance style information from content (a main goal of SGML/HTML)
- Author can not create or control classes of tags to control multiple tag types in the document
- Can not control styles for multiple documents at once
- Selector grouping methods can not be used to create contextual tag conditions
Boring Copyright Stuff....