Style Sheets Guide
=Syntax/Usage Methods=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Attaching Styles to Documents
There are currently three main mechanisms to specify Style Sheet information in HTML
documents. All methods serve the same purpose: to attach style declarations to HTML tags.
These three methods involve different levels of distance and abstraction from the HTML tags
they affect. This distance is directly related to the Cascade
properties of the usage level. [There is actually a fourth method indicated in the
CSS1 specification using
@import which does not have any popular support yet.]
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
(TheLINK tag)
[ 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 tag)
[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]
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....