Cascading Style Sheets FAQ
= Index DOT Css by Brian Wilson =

  Main Index | Property Index | CSS Support History | Browser History  


FAQ Index


  1. What are Cascading Style Sheets?
  2. Why do style sheets exist?
  3. Why use style sheets?
  4. Who defines the CSS standard? Is it one person? A company?
  5. What can be done with style sheets that can not be accomplished with regular HTML?
  6. Is there anything that CAN'T be replaced by style sheets?
  7. How do I design for backward compatibility using style sheets?
  8. What browsers support style sheets? To what extent?
  9. Do any WYSIWYG editors support creation of CSS? Any text editors?
  10. Can you use someone's style sheet without permission?
  11. What does the "Cascading" in "Cascading Style Sheets" mean?
  12. Which style specification method should be used? Why?
  13. What are the advantages and disadvantages of the various style specification methods?
  14. As a reader, how can I make my browser recognize my own style sheet?
  15. How do you override the underlining of hyperlinks?

1. What are Cascading Style Sheets?
A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a "cascading" of styles) when the document is rendered to form a single style rule for each 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 structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs 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 which can be used by a group of documents. Also, multiple style sheets can be integrated from different sources to form a cohesive tapestry of styles for a document. Style sheets are also backward compatible - They can be mixed with HTML styling elements and attributes so that older browsers can view content as intended.

4. Who defines the CSS standard? Is it one person? A company?
The W3C (the organization in charge of defining the HTML standards) creates and develops the CSS specifications with public input from the W3C www-style mailing list discussion forum and feedback from the member companies that comprise the W3C Consortium (which include companies such as Apple, Microsoft, and Netscape along with over 150 others.)

The "Cascading Style Sheets Level 1" recommendation is edited and maintained by Håkon Lie and Bert Bos of the W3C. The CSS2 recommendation is is edited and maintained by Håkon Lie, Bert Bos, Chris Lilley and Ian Jacobs.

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 go 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 browser 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 Css 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 rendering information. Virtual style elements 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 Css Property Index.
Rule of Thumb: if an HTML element or attribute gives cues as to how its contents 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?
Existing 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 HTML formatting methods, and style sheets specifications can control the appearance of these elements 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 and Opera 3.5 and above. Take note that the early implementations in these browsers did not support ALL of the properties and syntax described in the full CSS1 specification and beyond. Later versions have been getting much closer to full CSS1 compliance, but then comes the next hurdle - CSS2...it was such a big leap over CSS1 that it has taken the browsers years to come close to supporting a majority of CSS2's features. Mozilla and Opera's current versions both offer excellent CSS standards compliance. The Macintosh version of Internet Explorer is said to be very impressive in its CSS capabilities as well, but PC IE lags behind these implementations. Quite a few other implementations of CSS now 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, Netscape and Opera browsers.

9. Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?
As support for CSS in browsers has matured in the last year, both WYSIWYG and Text-based HTML editors have appeared that allow the creation or the assistance of creating Cascading Style Sheet syntax. There are now at least two dozen editors supporting CSS syntax in some form. The W3C maintains an up-to-date list of these WYSIWYG and text-based editors.

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 using a special language syntax. Use of the language is not copyrighted, and the syntax itself does not convey any content - only rendering 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 add style information to 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 for an element?

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 rule 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 Css 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 advantages and disadvantages to using each of them (next question.)

Method 1: External Style Sheets (The LINK [-->Index DOT Html] element)
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 use the styles contained within. Using this method, the appearance of many documents can be controlled using a single or small number of style sheets. This can save a LOT of time for an author.
Method 2: Embedded Style Sheets (The Style [-->Index DOT Html] element)
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 elements)
If you only have to apply style to one or a few elements in a single document, your best bet will often be an Inline Style. This method attaches a style definition within the HTML element 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
Disadvantages
Embedded Style Sheets
Advantages
Disadvantages
Inline Styles
Advantages
Disadvantages

14. As a reader, how can I make my browser recognize my own style sheet?
Netscape
It is not possible to do this in Netscape yet (as of version 4.0.)
Internet Explorer 3.0 (Win95/NT)
[It is possible to do this at least in Windows95/NT, but no user interface is provided. Unknown how this might be accomplished on other operating systems.]
  1. Open the Registry editor (Start..Run..regedit..ENTER)
  2. Under the 'HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles' key, Edit..New..String Value
  3. The new value should be called 'StyleSheet Pathname'
  4. For the value, type in the full directory path of your .css style sheet.
Internet Explorer 4.0 (Win95/NT)
  1. Under the View menu, select 'Internet Options'.
  2. Under the 'General' tab, choose the 'Accessibility' button.
  3. Choose the 'Format documents using my style sheet' check box and 'Browse...' to the location of your .css style sheet.

15. How do you override the underlining of hyperlinks?
CSS has the ability to explicitly control the status of underlining for an element - even for hyperlinks. The correct way to do this in an external or document-level style sheet is:
   A { text-decoration: none }
and within an anchor element as:
   <a HREF="example.htm" STYLE="text-decoration: none">link text</a>

Note: The underlining of hyperlinks is a long-standing visual convention that assists in the visual identification of active hyperlink areas. Many users expect to see hyperlinks underlined and may be confused and/or irritated if they are not used. User-defined style sheets address this user need by allowing the user to have final control over this feature. Unfortunately, wide support for this ability does not yet exist.

Boring Copyright Stuff....