Contents
Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. In the scientific environments in which the Web was conceived, people are more concerned with the content of their documents than the presentation. As people from wider walks of life discovered the Web, the limitations of HTML became a source of continuing frustration and authors were forced to sidestep HTML's stylistic limitations. While the intentions have been good -- to improve the presentation of Web pages -- the techniques for doing so have had unfortunate side effects. These techniques work for some of the people, some of the time, but not for all of the people, all of the time. They include:
These techniques considerably increase the complexity of Web pages, offer limited flexibility, suffer from interoperability problems, and create hardships for people with disabilities.
Style sheets solve these problems at the same time they supersede the limited range of presentation mechanisms in HTML. Style sheets make it easy to specify the amount of white space between text lines, the amount lines are indented, the colors used for the text and the backgrounds, the font size and style, and a host of other details.
For example, the following short CSS style sheet (stored in the file "special.css"), sets the text color of a paragraph to green and surrounds it with a solid red border:
P.special {
color : green;
border: solid red;
}
Authors may link this style sheet to their source HTML document with the LINK element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">This paragraph should have special green text.
</BODY>
</HTML>
HTML 4.0 provides support for the following style sheet features:
Style sheets, by contrast, apply to specific media or media groups. A style sheet intended for screen use may be applicable when printing, but is of little use for speech-based browsers. This specification allows you to define the broad categories of media a given style sheet is applicable to. This allows user agents to avoid retrieving inappropriate style sheets. Style sheet languages may include features for describing media dependencies within the same style sheet.
The current proposal addresses these issues by allowing authors to include rendering instructions within each HTML element. The rendering information is then always available by the time the user agent wants to render each element.
In many cases, authors will take advantage of a common style sheet for a group of documents. In this case, distributing style rules throughout the document will actually lead to worse performance than using a linked style sheet, since for most documents, the style sheet will already be present in the local cache. The public availability of good style sheets will encourage this effect.
Note. The sample default style sheet for HTML 4.0 that is included in [CSS2] expresses generally accepted default style information for each element. Authors and implementors alike might find this a useful resource.
HTML documents may contain style sheet rules directly in them or they may import style sheets. Any style sheet language may be used with HTML. A simple style sheet language may suffice for the needs of most users, but other languages may be more suited to highly specialized needs. This specification uses the style language "Cascading Style Sheets" ([CSS1]), abbreviated CSS, for examples.
The syntax of style data is that of the style sheet language, not HTML. Since user agents that support style sheets must parse these rules, authors must specify which style sheet languages are being employed.
Authors should use the META element to set the default style sheet language for a document. For example, to set the default to CSS, authors should put the following declaration in the HEAD of their documents:
<META http-equiv="Content-Style-Type" content="text/css">
The default style sheet language may also be set with HTTP headers. The above META declaration is equivalent to the HTTP header:
Content-Style-Type: text/css
User agents should determine the default style sheet language for a document according to the following steps (highest to lowest priority):
Documents that include elements that set the style attribute but which don't define a default style sheet language are incorrect. Authoring tools should generate default style sheet language information (typically a META declaration) so that user agents do not have to rely on a default of "text/css".
Conforming HTML parsers must be able to distinguish HTML from style sheet rules. The STYLE element and the style attribute define the beginning of style sheet data. The end of style sheet data is defined as the SGML end tag open delimiter (</). All style sheet data must be provided to the user agent's appropriate style sheet handler. Style sheets apply to the contents of HTML elements, which begin immediately after a start tag close delimiter (>). The end of this style sheet data is defined as the end tag open delimiter (14.2.2 Inline style information
Attribute definitions
The style attribute specifies style information for a single element. The style information is specified using the default style sheet language.
This example sets color and font size information for the text in a specific paragraph.
<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
Note the syntax of a CSS declaration: name : value. Property declarations are separated by a semi-colon.
The style attribute may be used to apply a particular style to an individual HTML element. If the style will be reused for several elements, authors should use the STYLE element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.
<!ELEMENT STYLE - - CDATA -- style info --> <!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type %ContentType; #REQUIRED -- content type of style language -- media %MediaDesc; #IMPLIED -- designed for use with these media -- title %Text; #IMPLIED -- advisory title -- >
Start tag: required, End tag: required
Attribute definitions
Attributes defined elsewhere
The STYLE element allows authors to put style sheet rules in the header of the document. HTML permits any number of STYLE elements in the HEAD section of a document.
User agents that don't support style sheets, or don't support the specific style sheet language used by a STYLE element, must hide the contents of the STYLE element. It is an error to render the content as part of the document's text. Some style sheet languages support syntax for hiding the content from non-conforming user agents.
Some style sheet implementations may allow a wider variety of rules in the STYLE element than in the style attribute. For example, with CSS, rules may be declared within a STYLE element for:
Rules for style rule precedences and inheritance depend on the style sheet language.
The following CSS STYLE declaration puts a border around every H1 element in the document and centers it on the page.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
To specify that this style information should only apply to H1 elements of a specific class, we modify it as follows:
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>
Finally, to limit the scope of the style information to a single instance of H1, set the id attribute:
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is not affected </H1>
<H1 id="myid"> This H1 is affected by style </H1>
<H1> This H1 is not affected </H1>
</BODY>
Although style information may be set for almost every HTML element, two elements, DIV and SPAN, are particularly useful in that they do not impose any presentation semantics (besides block-level vs. inline). When combined with style sheets, these elements allow users to extend HTML indefinitely, particularly when used with the class and id attributes.
In the following example, we use the SPAN element to set the font style of the first few words of a paragraph to small caps.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">The first</SPAN> few words of
this paragraph are in small-caps.
</BODY>
In the following example, we use DIV and the class attribute to set the text justification for a series of paragraphs that make up the abstract section of a scientific article. This style information could be reused for other abstract sections by setting the class attribute elsewhere in the document.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>The Chieftain product range is our market winner for
the coming year. This report sets out how to position
Chieftain against competing products.
<P>Chieftain replaces the Commander range, which will
remain on the price list until further notice.
</DIV>
</BODY>
HTML enables authors to create documents that can be rendered on a variety of media. For instance: graphical displays for personal computers and workstations, devices for televisions, specially adapted telephones and hand held wireless devices, speech-based browsers, and braille-based tactile devices. The media attribute specifies the media to which the style rules apply.
The following sample declarations apply to H1 elements. When projected in a business meeting, all instances will be blue. When printed, all instances will be centered.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
This example adds sound effects to anchors for use in speech output:
<STYLE type="text/css" media="aural">
A { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
</STYLE>
</HEAD>
Media control is particularly interesting when applied to external style sheets since user agents can save time by retrieving from the network only those style sheets that apply to the current device. For instance, speech-based browsers can avoid downloading style sheets designed for visual rendering. See the section on media-dependent cascades for more information.
Style sheets may be defined separately from an HTML document. This has the advantage of offering the ability:
When style sheets are enabled, users may be offered a choice of styles. Each style is potentially a cascade of several style sheets. Some style sheets (known as persistent) are applied independently of the user's choice (as long as it refers to the correct media type), while others (known as alternate) only apply to specific choices. A default style sheet is one that applies when the page is loaded, but which the user can disable in favor of an alternate style sheet.
The LINK element designates an external style sheet. The following attributes must be set:
In this example, we first specify a persistent external style sheet in the file mystyle.css.
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
Setting the title attribute changes the style sheet from persistent to default; user agents should offer users the possibility of applying named styles, based upon the title attribute.
<LINK href="mystyle.css" title="Compact" rel="stylesheet" type="text/css">
Adding the keyword "alternate" to the rel attribute makes this an alternate style sheet.
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
All alternate styles sharing the same title will be applied when the user (through the user agent) activates that style. Style sheets with different titles will not be applied in this case. However, style sheets that do not have the title attribute set will always apply (unless the user turns off style sheets altogether).
User agents should provide a means for users to view and pick from the list of alternate styles. The value of the title attribute is recommended as the name of each choice.
Cascading style sheet languages such as CSS allow style information from several sources to be blended together. However, not all style sheet languages support cascading. To define a cascade you simply provide a sequence of LINK and/or STYLE elements. The style information is cascaded in the order the elements appear in the HEAD.
In the following example, we define two alternate style sheets named "compact". If the user selects the "compact" style, both external style sheets will be applied, as well as the "common.css" style sheet, (always applied since its title attribute is not set). If the user selects the "big print" style, the files "bigprint.css" and "common.css" will be applied by the user agent, and the "compact" style sheets will not.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
Here is an example with both LINK and STYLE elements.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Authors should use the META element to set the default named style for a document. For example, to set the default named style in a document to "compact" (see the preceding example), include the following line in the HEAD:
<META http-equiv="Default-Style" content="compact">
The default style can also be set with HTTP headers. The above META declaration is equivalent to the HTTP header:
Default-Style: "compact"
If two or more META declarations or HTTP headers specify the default style, the last one takes precedence. HTTP headers are considered as occurring earlier than the document HEAD for this purpose. In the absence of an explicit declaration, the default style is defined by the first LINK element whose title has been set and whose rel attribute has the value "stylesheet".
A cascade may include style sheets applicable to different media. Both LINK and STYLE may be used with the media attribute. The user agent is then responsible for filtering out those style sheets that do not apply to the current medium.
In the following example, we define a cascade where the "corporate" style sheet is provided in several versions: one suited to printing, one for screen use and one for speech-based browsers (useful, say, when reading email in the car). The "techreport" stylesheet applies to all media. The color rule defined by the STYLE element is used for print and screen but not for aural rendering.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
When the user agent wants to render a document, it needs to find values for style properties, e.g. the font family, font style, size, line height, text color and so on. The exact mechanism depends on the style sheet language, but the following description is generally applicable:
The cascading mechanism is used when a number of style rules all apply directly to an element. The mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. If no rule can be found, the next step depends on whether the style property can be inherited or not. Not all properties can be inherited. For these properties the style sheet language provides default values for use when there are no explicit rules for a particular element.
If the property can be inherited, the user agent examines the immediately enclosing element to see if a rule applies to that. This process continues until an applicable rule is found. This mechanism allows style sheets to be specified compactly. For instance, authors may specify the font family for all elements within the BODY by a single rule that applies to the BODY element.
Some style sheet languages support syntax intended to allow authors to hide the content of STYLE elements from non-conforming user agents.
This example illustrates for CSS how to comment out the content of STYLE elements to ensure that older non-conforming user agents will not render them as text.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Web server managers may find it convenient to configure a server so that a style sheet will be applied to a group of pages. The HTTP Link header described in [RFC2068] has the same effect as a LINK element with the same attributes and values. Multiple Link headers correspond to multiple LINK elements occurring in the same order. For instance,
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
corresponds to:
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
It is possible to specify several alternate styles using multiple Link headers, and then use the rel attribute to determine the default style.
In the following example, "compact" is applied by default since it omits the "alternate" keyword for the rel attribute.
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
This should also work when HTML documents are sent by email. Some email agents can alter the ordering of [RFC822] headers. To protect against this affecting the cascading order for style sheets specified by Link headers, authors can use header concatenation to merge several instances of the same header field. The quote marks are only needed when the attribute values include whitespace. Use SGML entities to reference characters that are otherwise not permitted within HTTP or email headers, or that are likely to be affected by transit through gateways.
LINK and META elements implied by HTTP headers are defined as occurring before any explicit LINK and META elements in the document's HEAD.