Style Sheets 

Style sheets represent a major breakthrough in how Web page designers work, by expanding their ability to improve the appearence 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. These authors were used to paper media where they had full control. They learned how 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 never for all of the people, all of the time, They include:

• Using proprietary HTML extensions
• Converting text into images
• Using images for white space control
• Use of tables for page layout
• Writing a program instead of using HTML

These techniques considerably increase the complexity of Web pages, have limited flexibilty as well as suffering from interoperability problems, and creating hardships for people with disabilities.

Style sheets bring back the ease of control over presentation, and supercede the limited range of presentation mechanisms added to HTML over the last few years. 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.

HTML 4.0 provides support for the following features:

Flexible placement of Style Information

Placing style sheets in separate files makes them easy to reuse. Sometimes its useful to include rendering instructions within the document to which they apply, either grouped at the start of the document, or in attributes of the elements throughout the body of the document. To make it easier to manage style on a site basis, this specification describes how to use HTTP headers to set the style sheets to be applied to a document.

Independence from specific style sheet languages

This specification doesn't tie HTML to any particular style sheet language. This allows for a range of such languages to be used, for instance simple ones for the majority of users and much more complex ones for the minority of users with highly specialized needs. The examples included below all use the CSS (Cascading Style Sheets) language [CSS1], but other style sheet languages would be possible.

Cascading Style Sheets

This is the capability provided by some style sheet languages such as CSS to allow style information from several sources to be blended together. For instance, corporate style guidelines, styles common to a group of documents, and styles specific to a single document. By storing these separately, style sheets can be reused, simplifying authoring and making more effective use of network caching. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones. Not all style sheet languages support cascading.

Media Dependencies

HTML allows you to specify documents in a media independent way. This allows people to access Web pages using a wide variety of devices and media, e.g. graphical displays for windows, macs, and X11, set-top boxes for television sets, specially adapted phones and pda based portable devices, speech-based browsers, and braille-based tactical devices.

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.

Alternative Styles

Authors may wish to offer readers several alternative styles for viewing a document. For instance, a compact version with small fonts, and one with larger fonts for increased legibility. This specification allows you to specify such alternatives, including which one is the default. Users should be given the opportunity of selecting between these styles or switching off style sheets altogether.

Adding style to HTML 

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 languages may be more suited to highly specialized needs. HTML does not depend on one specific style sheet language. For the purposes of this document, however, we will present examples that illustrate Cascading Style Sheets ([CSS1]), abbreviated CSS.

Setting the default style sheet language 

The syntax of a style rule is that of the style sheet language, not HTML. Since user agents that support style sheets must parse these rules, users must declare which style sheet languages are being employed.

Use the META element to set the default style sheet language for a document. For example, to set the default to CSS, put the following declaration in the HEAD of your document:

<META http-equiv="Content-Style-Type" content="text/css">

The default style sheet language can also be set with HTTP headers. The above META declaration is equivalent to the HTTP header:

Content-Style-Type: text/css

If two or more META declarations or HTTP headers specify the default style sheet language, the last one takes precedence. HTTP headers are considered as occuring earlier than the document HEAD for this purpose. In the absence of an explicit declaration, the default style sheet language is assumed to be CSS. We recommend that authoring tools provide an explicit declaration.

Conforming HTML parsers must be able to distinguish HTML from style sheet rules. HTML elements and attributes define the beginning of style sheet data. The end of style sheet data is defined as the end tag open delimiter (</) immediately followed by an SGML name start character ([a-zA-Z]). All style sheet data must be provided to user agent's appropriate style sheet handler.

Inline style information 

The style attribute specifies style information for a single element. The style information is specified using the default style sheet language.

The style attribute is appropriate when you want to apply a particular style to an individual HTML element. If the style will be reused for several elements, you should consider using the STYLE element. For the best flexibility, place styles in separate style sheets.

Header style information: the STYLE element 

<!ELEMENT STYLE - - CDATA      -- style info -->
<!ATTLIST STYLE
  %i18n;                           -- lang, dir, for use with title --
  type        CDATA      #REQUIRED -- Internet content type
                                      for style language --
  media       CDATA      #IMPLIED  -- designed for use with these media --
  title       CDATA      #IMPLIED  -- advisory title --
  >

Start tag: required, End tag: required

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:

• All instances of a specific HTML element (e.g., all P elements, all H1 elements, etc.)
• All instances of an HTML element belonging to a specific class (i.e., whose class attribute is set to some value).
• Single instances of an HTML element (i.e., whose id attribute is set to some value).

Rules for style rule precedences and inheritance depend on the style sheet language.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<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>

<HEAD>
 <STYLE type="text/css">
   H1.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 are particularly useful in that they do not impose any predefined presentation. Since DIV and SPAN elements define structure only, when combined with style sheets, they allow users to extend HTML indefinitely.

<HEAD>
 <STYLE type="text/css">
  SPAN.sc-ex { font-variant: small-caps }
 </STYLE>
</HEAD>
<BODY>
  <P><SPAN id="sc-ex">The first</SPAN> few words of
  this paragraph are in small-caps.
</BODY>

<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>

Media types 

HTML enables authors to design documents that do not depend on a specific presentational medium. Thus, users may browse the Web with a wide variety of user agents: graphical displays for personal computers and workstations, set-top boxes for televisions, specially adapted telephones and pda-based portable devices, speech-based browsers, and braille-based tactile devices.

The media attribute specifies the intended output for a style rule. By setting the media attribute, authors may allow user agents to avoid retrieving from the network style sheets that do not apply to a given device.

<HEAD>
 <STYLE type="text/css" media="screen">
    H1 { color: blue}
 </STYLE>

 <STYLE type="text/css" media="screen, print">
   H1 { text-align: center }
 </STYLE>

 <STYLE type="text/acss" media="speech">
   H1 { 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.

<HEAD>
<LINK href="doc1-screen.css" rel="stylesheet" 
     type="text/css" media="screen">
<LINK href="doc1-print.css" rel="stylesheet" 
     type="text/css" media="print">
<LINK href="doc1-speech.css" rel="stylesheet"
     type="text/css" media="speech"> 
</HEAD>

See the following section on external style sheets for more information.

External style sheets 

Style sheets may be defined separately from an HTML document. This has the advantage of offering the ability:

• to share style sheets across a number of documents (and sites)
• to change the style sheet without modifications to the document

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.

Use the LINK element to designate an external style sheet. You must set the following attributes:

• Set the value of href to the location of the style sheet file. The value of href is a URL.
• Set the value of the rel attribute to indicate whether the style sheet is persistent (rel="stylesheet"), default (rel="stylesheet"), or alternate (rel="alternate stylesheet").
• Set the value of the title attribute when the style sheet is a default style sheet, i.e., when it may be activated or deactivated by the user.

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 alternative styles. We recommend that the value of the title attribute be used to name 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. A cascade can include style sheets applicable to different media. The user agent is then responsible to filtering out those style sheets which are inapplicable to the current situation.

    <LINK REL=stylesheet HREF="corporate.css">
    <LINK REL=stylesheet HREF="techreport.css">
    <STYLE TYPE="text/css">
        p.special { color: rgb(230, 100, 180) }
    </STYLE>

Setting the default named style 

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 occuring 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".

Inheritance and cascading 

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, you can specify the font family for all elements within the BODY by a single rule that applies to the BODY element.

Hiding the Content of Style Elements from non-conforming User Agents 

Some style sheet languages support syntax intended to allow authors to hide the content of STYLE elements from non-conforming user agents.

<STYLE type="text/css">
<!--
   H1 { color: red }
   P  { color: blue}
   -->
</STYLE>

Specifying style through HTTP headers 

Sometimes its convenient to configure a Web server to specify the style sheet to be applied to a group of pages at a site. The HTTP Link header 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. Thus,

Link: REL=stylesheet HREF="corporate.css"

corresponds to:

<LINK rel="stylesheet" href="corporate.css">

You can specify several alternative styles, using multiple Link headers, and then use the rel attribute to determine the default style.

Link: rel="stylesheet" title="compact" href="compact.css"
Link: rel="alternate stylesheet" title="big print" href="bigprint.css"

This should also work when HTML documents are being by transported via 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, you 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.