Attaching Styles to Documents
There are four main mechanisms to specify Style Sheet information in HTML
documents. All methods serve the same purpose: to attach style declarations to HTML elements.
These methods involve different levels of distance and abstraction from the HTML
they affect. This distance is directly related to the Cascade
properties of the usage level.
The syntax used to specify style sheet information varies slightly from
method to method, and various shorthand/combination syntax rules exist in addition to the
ones listed here, but these basic specification methods and terms remain the same.
External Style Sheets
(The LINK element)
[ IE3B1 | N4B2 ]
Description
This is the style specification method that is the farthest removed
from the tags it affects. It allows an author to import a Style Sheet
from a source external to the document. An external Style Sheet can
be used for many documents and is thus a very powerful mechanism for
controlling the common appearance of a group of documents. The LINK tag
is used in the HEAD
section in this method to specify the location (URL) of the external
Style Sheet.
Usage Method
This method needs the Selector to
identify which HTML tags to attach style declarations to. External Style
information exists as-is with no HTML tagging in an external file
to the HTML document.
This method allows the author to designate Style Sheet information
for an entire document within the document itself. Using the
STYLE container tag within the
HEAD section, information specified
here can override any External Style Sheet information imported using
the LINK method. Because the general
syntax is the same for this method and External Style Sheets, syntax
examples in these reference documents will generally only list one example
for both specification methods.
Usage Method
This method also needs a Selector to
identify which HTML tags to attach style declarations to. Document Level
Style Sheets must be specified within an HTML comment embedded in the
STYLE tag.
This style mechanism adds the new common attribute
STYLE to EVERY HTML tag in the
Body section (including to the BODY
tag itself.) This method allows for in-place style modification of HTML
tag structures by allowing style definitions within an HTML tag attribute.
Specifying Style in this manner is not ideal, as it mixes style
information with document content - this was never the intention of SGML.
In addition, the author loses the high-level/multi-document control
advantages of traditional style sheets. What the author loses in this
regard is regained by allowing local overrides of external style definitions
and a significant amount of space savings for small-scale style alterations.
Usage Method
Inline Styles need no Selector as they are already attached to the HTML
tag they will be applied to.
Importing Style Sheet Fragments (@Import)
[ IE4 | N ]
Description
The '@import' syntax allows a partial style sheet to be inserted into
an external or document level style sheet. This method of attachment
allows multiple style sheet fragments to be integrated into a single
style sheet. The '@import' statements must occur at the start of a
style sheet, before any style declarations.
Syntax:
@importurl([URL]);
Example:
@importurl(http://www.website.com/fragment.css);
Comments
[ IE3B1 | N4B2 ]
Whoops! Almost forgot Style Sheet Comments! Comments can be inserted in
External and Document Level Style Sheets using "/*" as a start
delimiter and "*/" as an end delimiter (This is very similar to
commenting in the C language.) It is not clear in the CSS1 specification
whether this comment format is possible inside Inline Styles, and there may
not even be a need for them. In such cases, HTML comments may also be used
in their place.