 |  |
| |
Style sheets are the way publishing professionals manage the overall "look" of their publications—backgrounds, fonts, colors, etc. Most desktop publishing software supports style sheets, as do the popular word processors.
From its earliest origins, HTML focused on content over style. Authors were encouraged to provide high quality information, and leave it to the browser to worry about presentation. We strongly urge you to adopt that philosophy in your HTML documents. However, while use of the HTML <font> tag and related attributes like Wcolor produce acute presentation effects, style sheets, when judiciously applied, bring consistency and order to documents. Style sheets let the HTML author control the presentation attributes for all the tags in a document or a whole collection of many documents, and from a single master style sheet.
In early 1996, the World Wide Web Consortium put together a draft proposal defining Cascading Style Sheets (CSS) for HTML. This draft proposal quickly matured into a recommended standard, which the commercial browser manufacturers were quick to exploit. Style is fast achieving parity with content on the World Wide Web.
Since we realize that eventual compliance with the W3C standard is likely, we'll cover all the components of the standard in this section, even if they are not yet supported by any browser. We'll denote clearly what is real, what is proposed, and what is actually supported.
At the simplest level, a style is nothing more than a rule that tells the browser how to display a particular HTML tag. Each tag has a number of properties associated with it, whose values define how that tag is rendered by the browser. A rule defines a specific value for one or more properties of a tag. For example, most tags have a color property, the value of which defines the color used to display that tag. Other properties include font attributes, line spacing, margins, and borders.
There are three ways to attach a style to a tag
Inline styles
Document-level styles
External style sheets
You may use one or more style types in your documents. The browser either merges the style definitions from each style or redefines the style characteristic for a tag's contents. Styles from these various sources are applied to your document, combining and defining style properties that cascade from external style sheets through local document styles, ending with inline styles.
The inline style is the simplest way to attach a style to a tag—just include a style attribute with the tag, with a list of properties and their values. The browser uses the style properties and values to render the contents of just this instance of the tag.
For instance, the following style tells the browser to display the level-one header text, "This is blue," in the <h1> tag style characteristic of the browser and also in the color blue and italicized:
<h1 style="color: blue; font-style: italic" >This is blue</h1>
This type of style definition is called "inline" because it occurs with the tag as it appears in the document. The scope of the style covers the contents of that tag only. Since inline styles are sprinkled throughout your document, they can be difficult to maintain. Use the style attribute sparingly and only in those rare circumstances when you cannot achieve the same effects otherwise.
Style definitions are created with the name of the style attribute—color, for example—followed by a colon and then the style's value. You will commonly supply a list of style definitions for a single element. In the list, each style definition is separated by a semicolon.
The real power of style sheets dawns when you place a list of presentation rules within the head of an HTML document. Enclosed within their own <style> and </style> tags, "document-level" style sheets affect all the same tags within that document, except for tags that contain an overriding inline style attribute.
The <style> tag must appear within the <head> of a document. Everything between the <style> and </style> tags is considered part of the style rules to be applied to the document. To be perfectly correct, the content of the <style> tag is not HTML and is not bound by the normal rules for HTML content. The <style> tag, in effect, lets you insert foreign content into your HTML document that the browser uses to format your tags. Older browsers may not know how to handle this content, so it is common practice to place your style definitions inside an HTML comment (<!-- -->) within the style tag.
Style definitions in a style sheet begin with the name of the tag you are defining a style for. The style definitions are contained in braces following the tag name. For example, this document-level style sheet displays the contents of all <h1> tags as blue, italic text:
<head>
<title>All True Blue</title>
<style type="text/css">
<!--
/* make all H1 headers blue */
H1 {color: blue; font-style: italic}
-->
</style>
</head>
<body>
<h1>This is blue</h1>
...
<h1>Ever so blue</h1>One important attribute for the style tag is the type attribute. The type attribute defines the types of styles you are including within the tag. Cascading style sheets always carry the type text/css; JavaScript style sheets use the type text/javascript. We prefer to include the type attribute so that there is no opportunity for confusion.
Comments are welcome inside the <style> tag and in external style sheets, but don't use a standard HTML comment; style sheets aren't HTML. Rather, enclose style comments beginning with the sequence /* and ending with */. Use this comment syntax for both document-level and external style sheets. Comments may not be nested.
We recommend documenting your styles whenever possible, especially in external style sheets. Whenever the possibility exists that your styles may be used by other authors, comments make it much easier to understand your styles.
You may also place style definitions, like our document-level style sheet example for the <h1> tags, into a text file with the MIME type of text/css and import this style sheet into your HTML documents. Because an external style sheet is a file separate from the HTML document and is loaded by the browser over the network, you can store it anywhere, reuse it often, and even use others' style sheets. But most important, external style sheets give you the power to influence the display styles not only of all related tags in a single document, but for an entire collection of documents.
For example, suppose we create a file named gen_styles.css containing the style rule:
H1 {color: blue; font-style: italic}For each and every one of the HTML documents in our collections, we can tell the browser to read the contents of the gen_styles.css file, which, in turn, colors all the <h1> tag contents blue and renders the text in italic. Of course, since style definitions cascade by nature, the style can be overridden by a document-level or inline style definition.
You can load external style sheets into your HTML document in two different ways: with the <link> tag for the @import style command.
One way to load an external style sheet is to use the <link> tag:
<head>
<title>Linked Style</title>
<link rel=stylesheet type="text/css"
href="http://www.kumquats.com/styles/gen_styles.css"
title="The blues"/>
</head>The <link> tag creates a relationship between the current document and some other document on the Web. In the example, we tell the browser that the document named in the href attribute is a style sheet, and that its contents conform to the CSS standard, as indicated by the type attribute. We also provide a title for the style sheet, making it available for later reference by the browser.
The <link> tag must appear in the <head> of a document. The URL of the style sheet may be absolute or relative to the document's base URL.
The second technique for loading an external style sheet imports the files with a special command within the <style> tag:
<head>
<title>Imported style sheet</title>
<style type="text/css">
<!--
@import url(http://www.oreilly.com/styles/gen_styles.css);
@import url(http://www.oreilly.com/styles/spec_styles.css);
BODY: {background: url(backgrounds/marble.gif)}
-->
</style>
</head>The @import command expects a single URL parameter that names the network path to the external style sheet. The url keyword, parentheses, and trailing semicolon are all required elements of the @import command. The URL may be absolute or relative to the document's base URL. The @import command must appear before any conventional style rules, either in the <style> tag or in an external style sheet. Otherwise, the browser ignores the preceding style definitions. This ordering also means that subsequent style rules can override rules in the imported sheet, and indeed they do.
The @import command can appear in a document-level style definition or even in another external style sheet, letting you create nested style sheets.
|  | |
| II. CSS |  | 9.2. Style Syntax |
Copyright © 2003 O'Reilly & Associates. All rights reserved.