14 Style Sheets

Content

  1. Introduction to style sheets
  2. How to add style to HTML
    1. Set the default style sheet language
    2. Built-in style information
    3. Style information in title: STYLE element
    4. Types of devices
  3. External Style Sheets
    1. Preferred and alternative style sheets
    2. Specifying external style sheets
  4. Cascading Style Sheets
    1. Device-dependent cascades
    2. Inheritance and cascades
  5. How to hide style information from user agents
  6. Linking style sheets using HTTP headers

14.1 Introduction to Style Sheets

Style sheets represent the greatest achievement for designers of Web-pages, expanding opportunities for improving the appearance of pages. In the scientific environments in which the Web was born, people are more focused on the content of documents than on their presentation. As the Web was opened by other people, HTML restrictions became a source of frustration, and authors had to shy away from the stylistic limitations of HTML. Although the intentions were good - improving the presentation of Web pages, - the technology had undesirable side effects. These technologies worked only for some, only sometimes, but not for everyone and not always. This includes:

  • Using your own HTML extensions
  • Convert text to images
  • Using images to manage empty space
  • Using tables to place objects on the page
  • Writing programs instead of using HTML

These technologies significantly complicate Web pages, limit flexibility, create interaction problems and create difficulties for people with physical disabilities.

Style sheets solve these problems, while surpassing the limited representation mechanisms in HTML. Style sheets simplify the definition of intervals between lines of text, indents, colors used for text and background, font size and style, and other information.

For example, the following CSS stylesheet (stored in the "special.css" file), green, sets the color of the paragraph text and surrounds it with a solid red border: 

  P.special {
 Color: green;
 Border: solid red;
 }

Authors can associate style sheets with the original HTML document using the LINK element: 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40">
 <HTML>
  <HEAD>
  <LINK href = "special.css" rel = "stylesheet" type = "text / css">
  </ HEAD>
  <BODY>
  <P class = "special"> In this paragraph, the text should be green.
  </ BODY>
 </ HTML>

HTML 4.0 provides support for the following functions of style sheets:

Flexible placement of information about the style
Putting style sheets into separate files makes it easier to reuse them. Sometimes it's useful to include view instructions in the document to which they apply, at the beginning of the document, or in the attributes of the elements in the body of the document. To simplify the management of the site style, this specification describes the use of HTTP headers to set style sheets that apply to a document.
Independence from the languages ​​of style sheets
This specification does not bind HTML to a specific language of style sheets. This allows the use of a wide range of such languages, for example, simple languages ​​for most users and more complex for more specialized cases. All the examples below use CSS (Cascading Style Sheets) [CSS1] , but other languages ​​can be used.
Cascades
This feature is provided by some style sheet languages, such as CSS, to combine style information from multiple sources. This can be, for example, corporate style provisions, styles common to a group of documents, as well as styles specific to a single document. With the use of separate storage, these stylesheets can be reused, which simplifies the work of authors and improves the efficiency of network caching. The cascade defines an ordered sequence of style sheets, in which the rules of the later tables take precedence over the earlier ones. Not all stylesheet languages ​​support cascades.
Dependence on devices
HTML allows authors to develop documents regardless of devices. This allows users to access Web pages using various devices, such as graphic displays for computers running Windows, Macintosh OS X11, TV devices, specially adapted phones and handheld devices based on PDAs, speech browsers and tactile devices based on the alphabet Broylie.

Style sheets, in contrast, apply to specific devices or groups of devices. A stylesheet designed for the screen can be used for printing, but is useless for speech browsers. This specification allows you to define broad categories of devices to which a particular style sheet applies. This allows user agents to avoid loading unnecessary style sheets. Styles of style sheets can include functions for describing device dependencies in one table.

Alternative styles
Authors can offer readers several ways to view the document. For example, a stylesheet for presenting compact documents with a small font, or a table that specifies large fonts for easy reading. This specification allows authors to specify a preferred style sheet, as well as alternative tables for specific users or devices. User agents should allow users to select one of the alternative tables or disable all style sheets.
Performance issues
Some users have expressed doubts about the speed of the style sheets. For example, loading an external style sheet can delay the overall presentation of the material for the user. Similar situations occur even if a long set of rules relative to the style is included in the document header.

These problems are solved by allowing authors to include presentation instructions in each HTML element. Thanks to this, information about the view is always available at the time the item is submitted by the user agent.

In many cases, the authors will take advantage of the use of a common style sheet for a group of documents. In this case, the distribution of style rules in the document will result in performance degradation compared to using the associated style sheet, since for most documents the style sheet will already be in the local cache. This effect will result in the general availability of good style sheets.

14.2 How to add a style to HTML

Note. The example of the default stylesheet for HTML 4.0, included in [CSS2] , expresses common style information for each element. Authors can use this resource.

Documents in HTML format can contain style sheet rules directly or can import style sheets.

In HTML, you can use all the stylesheet languages. A simple style sheet language can be sufficient for most users, while other languages ​​can be suitable for more specialized tasks. The examples in this specification use the language "Cascading Style Sheets" ( [CSS1] ), abbreviated CSS.

The syntax of style data depends on the language of the style sheet.

14.2.1 Setting the Default Style Sheet Language

Authors must specify the style sheet language for the style information associated with the HTML document.

To set the default style sheet language for a document, use the META element. For example, to set the default CSS language, put the following declaration in the HEAD section: 

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

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

  Content-Style-Type: text / css

User agents must define the default style sheet language for the document in accordance with the following steps (from highest priority to lowest):

  1. If a "Content-Style-Type" is specified in the META declaration, the style sheet language identifies the last declaration in the symbol stream.
  2. Otherwise, if "Content-Style-Type" is specified in HTTP headers, the style sheet language defines the last header in the symbol stream.
  3. Otherwise, the default language is "text / css".

Documents that include elements that set the style attribute, but do not specify the default style sheet language, are incorrect. The development tools should generate information about the language of the default style sheets (usually using META declarations) so that the user agents do not rely on the default language "text / css".

14.2.2 Built-in style information

Attribute definitions

Style = style [CN]
This attribute specifies information about the style of the current element.

Style The style attribute specifies information about the style of one element. The style sheet language of the built-in style rules is determined by the default style sheet language . The syntax of style data depends on the language of the style sheets.

In this example, you set information about the color and font size of the text of a particular paragraph. 

 What a charm these stylesheets are for! <P style = "font-size: 12pt; color: fuchsia">

In CSS, the property declarations have the form "name: value" and are separated by a semicolon.

The style attribute can be used to apply a particular style to a particular HTML element. If the style is reused for multiple elements, authors should use the STYLE element to regroup this information. For optimal flexibility, authors should define styles in external style sheets.

14.2.3 Style information in the header : STYLE element 

  <! ELEMENT STYLE - - % StyleSheet - style information ->
 <! ATTLIST STYLE
  % I18n;
  - lang , dir , for use with header -
  Type % ContentType;
  #REQUIRED - the style content of the style language -
  Media % MediaDesc;
  #IMPLIED - for use with these devices -
  Title % Text;
  #IMPLIED - recommended title -
  >

Start tag: required , End tag: required

Attribute definitions

Type = content-type [CI]
This attribute specifies the language of the style sheets for the content of the element and takes precedence over the language of the style sheets, and is used. The language of the style sheets is specified as the content type (for example, "text / css"). Authors must specify a value for this attribute; It does not have a default value.
Media = device descriptors [CI]
This attribute specifies the target device for style information. It can be one device descriptor or a list of descriptors separated by commas. The default value is "screen".

Attributes defined elsewhere

The STYLE element allows authors to put style sheet rules in the head section of the document. In HTML, any number of STYLE elements in the HEAD section is allowed.

User agents that do not support style sheets or do not support a specific style sheet language used in the STYLE element should not display the STYLE element. An error will generate its contents as part of the document text. Some stylesheet languages ​​support syntax in order to not display content to non- conforming user agents.

The syntax of style data depends on the language of the style sheet.

Some implementations of style sheets can support a greater variety of rules for the STYLE element than in the style attribute. For example, in CSS rules I can declare in the STYLE element for:

  • All instances of a specific HTML element (for example, for all elements of P , all elements of H1 , etc.)
  • All instances of an HTML element belonging to a particular class (that is, a specific value for the class attribute).
  • Individual instances of the HTML element (that is, for the id attribute of which the specified value is set).

The rules for the priority and inheritance of style sheet rules depend on the language of the tables.

The following CSS STYLE declaration results in a border around all the H1 elements in the document and centering them on the page. 

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

To indicate that this style information should only apply to H1 elements of a particular class, you can change the definition as follows: 

 <HEAD>
  <STYLE type = "text / css">
  H1.myclass {border-width: 1;  Border: solid;  Text-align: center}
  </ STYLE>
 </ HEAD>
 <BODY>
  <H1 class = "myclass"> Our style affects this H1 level header </ H1>
  <H1> And our style does not affect this heading </ H1>
 </ BODY>

Finally, to limit the scope of style information to a single instance of the H1 element, 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 style does not affect this H1 header </ H1>
  <H1 id = "myid"> And this affects </ H1>
  <H1> This one is not affected again </ H1>
 </ BODY>

Although style information can be set for almost all HTML elements, two elements, DIV and SPAN , are particularly useful because they do not impose any presentation semantics (except block-level vs. inline ). Together with style sheets, these elements allow users to unlimitedly expand the HTML language, especially when using the class and id attributes.

In the following example, the SPAN element is used to set small capital letters for the font style of the first few paragraph words. 

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

In the following example, we use the DIV element and the class attribute to set the text alignment for a number of paragraphs that constitute an introduction to a scientific article. Style information can be reused for other sections of the introduction by setting the class attribute anywhere 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>

14.2.4 Types of devices

HTML allows authors to create documents that use the characteristics of the device on which the document will be presented (for example, graphic displays, television screens, portable devices, speech browsers, tactile devices based on the Braille alphabet, etc.). Using the media attribute, authors can allow user agents to load and apply style sheets selectively. See the list of recognizable device descriptors .

The ads in the following example apply to H1 elements. When displayed on the projector during a meeting, all instances will be displayed in blue. When printed, they 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 the speech output device: 

  <STYLE type = "text / css" media = "aural">
  A {cue-before: uri (bell.aiff);  Cue-after: uri (dong.wav)}
  </ STYLE>
 </ HEAD>

Device management is particularly interesting when used with external style sheets, because user agents can save time by downloading from the network only the style sheets that apply to the current device. For example, speech browsers may not load style sheets designed for visual presentation. For more information, see the section on device-specific cascades .

14.3 External Style Sheets

Authors can separate style sheets from HTML documents. This gives the following advantages:

  • Authors and site managers can share stylesheets in a number of documents (and sites).
  • Authors can modify style sheets without changing the document.
  • User agents can download stylesheets selectively (depending on the device descriptions).

14.3.1 Preferred and Alternative Style Sheets

HTML allows authors to link to the document any number of external style sheets. The style sheet language defines the interaction of several external style sheets (for example, CSS cascading rules).

Authors can specify a number of mutually exclusive style sheets, called alternative ones . Users can choose tables that they like best. For example, the author can specify one style for small screens, the other for visually impaired users (for example, using a large font). User agents should provide users with the ability to select one of the alternative tables.

The author can indicate that one of the alternatives is preferable . User agents must use the author's preferred stylesheets if the user does not select another alternative.

Authors can group several alternative style sheets (including those preferred by the author) under the same style name . If the user selects a named style, the user agent must apply all style sheets with that name. User agents should not use alternative style sheets with a different style name. How to assign a name to a group of styles is described in the section on defining external style sheets .

Authors can also specify persistent stylesheets that user agents must apply in addition to alternative style sheets.

When using a stylesheet, user agents must take device descriptors into account .

User agents should also allow users to completely disable the author's style sheets; In this case, the user agent should not use any of the style sheets.

14.3.2 Specifying External Style Sheets

Authors specify external stylesheets using the attributes of the LINK element:

  • Set the location of the style sheet file in the href attribute. The value of the href attribute must be a URI .
  • Set the type attribute to a value that specifies the language of the associated resource (style sheet). This allows the user agents not to load style sheets that use unsupported languages.
  • Specify whether the stylesheet is permanent, preferred or alternative:
    • To make the table permanent, set the rel attribute to "stylesheet", and do not set the title attribute.
    • To make the table preferable, set the rel attribute to "stylesheet", and give the table a name using the title attribute.
    • To specify an alternate table, set the rel attribute to "alternate stylesheet" and give the table a name using the title attribute.

User agents should provide users with a means of viewing and selecting a stylesheet from the list of alternatives. For the title attribute, it is recommended that you set the value that this table will represent in the list.

In this example, we first define a permanent style sheet in the mystyle.css file: 

 <LINK href = "mystyle.css" rel = "stylesheet" type = "text / css">

Setting the title attribute assigns it to the author's preferred table: 

  <LINK href = "mystyle.css" title = "Compact" rel = "stylesheet" type = "text / css">

Adding the keyword "alternate" and the rel attribute will make it an alternative style sheet: 

 <LINK href = "mystyle.css" title = "Medium" rel = "alternate stylesheet" type = "text / css">

For more information on external stylesheets, see the section on links and external stylesheets .

The authors can also use the META element to set the preferred style sheet. For example, to set the preferred style sheet "compact" (see the previous example), authors can include the following line in the HEAD element: 

 <META http-equiv = "Default-Style" content = "compact">

The preferred stylesheet can also be specified using the HTTP headers. The META declaration above is equivalent to the HTTP header: 

  Default-Style: "compact"

If the preferred style sheet is specified by two or more META elements or HTTP headers, the last declaration has the advantage. It is believed that HTTP headers are processed earlier than HEAD declarations.

If the preferred style sheet is specified by two or more LINK elements, the first is the advantage.

Preferred style sheets that are specified using META or HTTP headers take precedence over the tables specified by the LINK element.

14.4 Cascading Style Sheets

Cascading style sheet languages , such as CSS, allow you to use style information from several sources. However, not all stylesheet languages ​​support cascades. To determine the cascade, the authors specify a sequence of LINK and / or STYLE elements. A cascade of style sheet information is produced in the order of the elements in the HEAD section.

Note. Cascading of style sheets of different languages ​​is not described in this specification. Authors should avoid mixing languages.

In the following example, we define two alternative style sheets named "compact". If the user selects the "compact" style, the user agent must apply both external tables, as well as the persistent table "common.css". If the user selects the "big print" style, only the "bigprint.css" alternative table and the "common.css" permanent table will be applied. 

 <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 of a cascade in which both elements are involved - LINK and STYLE . 

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

14.4.1 Device-dependent cascades

A cascade can include style sheets applied to various devices. The LINK and STYLE elements can be used with the media attribute. The user agent is responsible for filtering style sheets that do not apply to the current device.

In the following example, we define a cascade in which the "corporate" stylesheet is represented in several versions: one for printing, another for the screen view, and the third for voice browsers (useful, for example, when reading e-mail in a machine). The "techreport" table applies to all devices. The color rule defined by the STYLE element is used for printing and for the screen, but not for the audio representation. 

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

14.4.2 Inheritance and cascades

If the user agent is going to submit the document, he needs to find values ​​for the style properties, for example, the font family, font style, font size, string length, text color, etc. The exact mechanism depends on the language of the style sheets, but in general the following applies:

A cascading mechanism is used if a number of style rules are applied to the element. This mechanism allows the user agent to sort the specificity rules and determine which rule to apply. If the rule can not be found, the next step depends on the inheritance of the property. Not all properties can be inherited. For these properties, the style sheet language provides default values ​​for use in the absence of explicit rules for a particular element.

If the property can be inherited, the user agent checks the element directly to which the current element is nested and looks for the rule that applies to it. This process continues until the applicable rule is discovered. This mechanism provides a compact setting of style sheets. For example, authors can specify a font family for all elements in the BODY section using a single rule for the BODY element.

14.5. How to hide style information from user agents

Some stylesheet languages ​​support syntax that allows authors to hide the contents of STYLE elements from inappropriate user agents.

In this example, CSS shows how you can hide the contents of STYLE elements to ensure that older non-conforming user agents will not present them as text. 

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

14.6 Linking Style Sheets Using HTTP Headers

Web server managers can configure the server so that the style sheet is applied to a group of pages. The HTTP Link header described in [RFC2068] , section 19.6.1.2, acts in the same way as the LINK element, with the same attributes and values. Multiple Link headers correspond to several LINK elements in the same order. For example, 

 Link: <http://www.acme.com/corporate.css>;  REL = stylesheet

Corresponds to: 

 <LINK rel = "stylesheet" href = "http://www.acme.com/corporate.css">

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

In the following example, the "compact" style is used by default, because it does not have the "alternate" keyword for the rel attribute. 

 Link: <compact.css>;  Rel = "stylesheet";  Title = "compact"
 Link: <bigprint.css>;  Rel = "alternate stylesheet";  Title = "big print"

This also works when sending HTML documents by e-mail. Some email agents can change the order of the headers [RFC822] . To protect the style from changing the order of cascades for tables specified by the Link headers, authors can use header combining to combine multiple instances of the same header field. Quotations are only required if attribute values ​​include spaces. Use SGML entities to refer to characters that are invalid in HTTP or email headers or characters that can be changed when passed through gateways.

The LINK and META elements, implied by HTTP headers, are defined as encountered before the explicit LINK and META element in the HEAD section of the document.

Back next content elements attributes index