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