How do css style sheets work

If you want to create a style sheet for use on several documents, link to an external style sheet instead. In the future, other style sheet languages may be added.

Note that the style element must be placed in the document's head along with the title element. It should not be placed within the body. If you are likely to want to use the same styles for several web pages it is worth considering using a separate style sheet, which you then link from each page.

User agents should allow users to select from alternate style sheets. The author may specify that one of the alternates is a preferred style sheet. User agents should apply the author's preferred style sheet unless the user has selected a different alternate.

Authors may group several alternate style sheets including the author's preferred style sheets under a single style name. When a user selects a named style, the user agent must apply all style sheets with that name.

User agents must not apply alternate style sheets with a different style name. The section on specifying external style sheets explains how to name a group of style sheets.

Authors may also specify persistent style sheets that user agents must apply in addition to any alternate style sheet. User agents must respect media descriptors when applying any style sheet.

User agents should also allow users to disable the author's style sheets entirely, in which case the user agent must not apply any persistent or alternate style sheets. Authors specify external style sheets with the following attributes of the LINK element:. 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. In this example, we first specify a persistent style sheet located in the file mystyle.

Setting the title attribute makes this the author's preferred style sheet:. Adding the keyword "alternate" to the rel attribute makes it an alternate style sheet:. For more information on external style sheets, please consult the section on links and external style sheets. Authors may also use the META element to set the document's preferred style sheet. For example, to set the preferred style sheet to "compact" see the preceding example , authors may include the following line in the HEAD :.

The preferred style sheet may also be specified with HTTP headers. If two or more LINK elements specify a preferred style sheet, the first one takes precedence. 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. The style information is cascaded in the order the elements appear in the HEAD. This specification does not specify how style sheets from different style languages cascade.

Authors should avoid mixing style sheet languages. In the following example, we specify two alternate style sheets named "compact". If the user selects the "compact" style, the user agent must apply both external style sheets, as well as the persistent "common. If the user selects the "big print" style, only the alternate style sheet "bigprint.

A cascade may include style sheets applicable to different media. 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. When the user agent wants to render a document, it needs to find values for style properties, e.

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. If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:.

Margins Margin Collapse. Float Clear Float Examples. Navbar Vertical Navbar Horizontal Navbar. Shadow Effects Box Shadow. Report Error. Your message has been sent to W3Schools.