Style Sheets Guide
=Syntax/Usage Methods=

= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


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.
Syntax: Selector { [Style Property Name]: [Property Value] }
Example: h1 { font-size: 12pt }
[See Complex HTML Example]

Document Level Style Sheets (The STYLE element)
[ IE3B1 | N4B2 ]
Description
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.
Syntax: Selector { [Style Property Name]: [Property Value] }
Example: h1 { font-size: 12pt }
[See Complex HTML Example]

Inline Styles
[ IE3B1 | N4B3 ]
Description
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.
Syntax: <[tag] STYLE="[Style Property Name]: [Property Value]">
Example: <h1 STYLE="font-size: 12pt">
[See Complex HTML Example]


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:
@import url([URL]);
Example:
@import url(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.

Boring Copyright Stuff....