Home | CSS Tutorials | JavaScript Editor | Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor. |
If you've ever created a web site, you've most likely used an assortment of <font> and other tags to control how your pages look. This ties the presentation of your site with its content , making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site - you'll have to edit every page in order to do this.
Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.
Web style sheets have been around for a number of years, but their power and importance went largely unnoticed since few implementations existed. Web authors, anxious to add creativity to their pages by influencing the presentation, began to use Netscape's proprietary extensions rather than the more powerful style sheets. This was quite natural, since Netscape's proprietary extensions could be seen by a significant portion of Web users, while few would see style sheet enhancements.
Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets became apparent, as did the disadvantages of continually creating more HTML tags for presentation effects.
Netscape's BODY attributes are now widely accepted on the Web, and have become standardized in HTML 3.2 . Yet BGCOLOR , TEXT and friends simply do not provide the flexibility of style sheets. Most background images would leave a page unreadable to someone whose display only offered 16 colors; many pages are difficult to read with only 256 colors. With conventional BODY attributes, an author must choose whether the benefits of a background image outweigh the costs; with style sheets, an author can offer a number of different images, in different style sheets, so that the user can choose the "24-bit style sheet" or "8-bit style sheet," depending on how many colors his or her system can display. If no author-supplied style suits the user, he or she can simply ignore the author's style.
Style sheets can make an author's life much easier. While one could use <HR WIDTH="75%" SIZE=5 ALIGN=center> for every horizontal rule, this becomes very cumbersome for the author. With style sheets, one only needs to specify such presentational preferences once , and the style can be applied to an entire site. And if the author decides that WIDTH="50%" would be better, then he or she only needs to change this preference in one place , rather than having to search through hundreds of pages to change the HTML. Not only that, but style sheets also reduce download time when one file contains all the style information.
Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements . With just HTML and its proprietary extensions, one must rely on attributes like BGCOLOR , which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.
With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like <DD> or <IMG SRC="blank.gif" WIDTH=10 ALT=""> that carry with them many negative side-effects. Margins can be suggested without having to put the entire page in a table. Style sheets also reduce the need for multi-file search and replace; if an author decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.
Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users.
A style sheet is made up of rules that look something like this:
H3 {
font-family: Arial;
font-style: italic;
color: green
}
Each rule begins with a selector , which is H3 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. A declaration is simply a CSS property followed by a value . For example, the declaration " font-style: italic; " is composed of the property " font-style " followed by the value " italic ". So, this example states that every <H3> HTML tag should use an Arial italic font and be colored green.
You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule:
.greenitalic {
font-family: Arial;
font-style: italic;
color: green
}
The declaration block is the same as that in the previous example, but instead of using H3 as the selector, we're using the class .greenitalic . Note that .greenitalic doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).
To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to apply the above style to an <H3> tag, you'd use:
< H3 CLASS="greenitalic">this is greenitalic<H3>
There are several ways you can use style sheets. The first is simply to create your HTML documents using the style attribute introduced in HTML 4.0. Most HTML tags now support this attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend against using the style attribute. By applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design.
The next method is to embed the style using a style block in the <HEAD> section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. For example:
<STYLE>
BODY { color : navy ; }
H1 { font-size : 12pt ; }
</STYLE>
While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. We recommend using the remaining method, linking an external style sheet, to achieve the greatest flexibility. Linking a style sheet to an HTML document simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the style sheet to. For example:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design.
Authors may separate style sheets from HTML documents. This offers several benefits:
HTML allows authors to associate any number of external style sheets with a document. The style sheet language defines how multiple external style sheets interact (for example, the CSS "cascade" rules).
Authors may specify a number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite among these depending on their preferences. For instance, an author may specify one style sheet designed for small screens and another for users with weak vision (e.g., large fonts). 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.css :
<LINK href="mystyle.css" rel="stylesheet" type="text/css">Setting the title attribute makes this the author's preferred style sheet:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">Adding the keyword "alternate" to the rel attribute makes it an alternate style sheet:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">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 :
<META http-equiv="Default-Style" content="compact">The preferred style sheet may also be specified 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 preferred style sheet, the last one takes precedence. HTTP headers are considered to occur earlier than the document HEAD for this purpose.
If two or more LINK elements specify a preferred style sheet, the first one takes precedence.
Preferred style sheets specified with META or HTTP headers have precedence over those specified with the LINK element.
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, authors specify a sequence of LINK and/or STYLE elements. The style information is cascaded in the order the elements appear in the HEAD .
Note. 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.css" style sheet. If the user selects the "big print" style, only the alternate style sheet "bigprint.css" and the persistent "common.css" 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 a cascade example that involves both the 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>
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 media="screen, print" 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.
[an error occurred while processing this directive]
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>This section only applies to user agents conforming to versions of HTTP that define a Link header field.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 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.yaldex.com/corporate.css>; REL=stylesheetcorresponds to:
<LINK rel="stylesheet" href="/">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 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 .
Home | CSS Tutorials | JavaScript Editor | Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor. |