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.)
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 <fontSIZE> 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.)
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
Can control styles for multiple documents at once
Classes can be created for use on multiple HTML element types in many documents
Selector and 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
Embedded Style Sheets
Advantages
Classes can be created for use on multiple tag types in the document
Selector and 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)
Can not control styles for multiple documents at once
Author can not create or control classes of elements to control multiple
element types within the document
Selector grouping methods can not be used to create complex element addressing scenarios
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.]
Open the Registry editor (Start..Run..regedit..ENTER)
Under the 'HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles'
key, Edit..New..String Value
The new value should be called 'StyleSheet Pathname'
For the value, type in the full directory path of your .css style sheet.
Internet Explorer 4.0 (Win95/NT)
Under the View menu, select 'Internet Options'.
Under the 'General' tab, choose the 'Accessibility' button.
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:
<aHREF="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.