 |
Chapter 9 Cascading Style Sheets |
 |
|
Chapter 9 Cascading Style Sheets |
|
The syntax of a style, as you may have gleaned from our previous examples, is fairly straightforward.
A style rule is made up of at least three basic parts: a tag selector, which identifies the name of the tag that the style rule affects, followed by a curly brace ({}) enclosed, semicolon-separated list of one or more style property:value declaration pairs:
tag-selector {property1:value1; property2:value1 value2 value3; ...}
Properties require at least one value, but may include two or more values. Separate multiple values with a space, as is done for the three values that define property2 in the example. Some properties require that multiple values be separated with commas.
Style-conscious browsers ignore letter case in any element of a rule. Hence, H1 and h1 are the same selector, and COLOR, color, ColOR, and cOLor are equivalent properties. Convention dictates, however, that tag names be in all capitals, and that you write properties and values in lowercase. We'll abide by those conventions throughout this book.
Any valid HTML tag name (a tag minus its enclosing "<" and ">" characters and attributes) can be a selector. You may include more than one tag name in the list of selectors, as we explain in the following sections.
When separated by commas, all the tags named in the selector list get affected by the property values in the style rule. This can make life very easy for the HTML author. For instance:
H1, H2, H3, H4, H5, H6 {text-align: center}
does exactly the same thing as:
H1 {text-align: center}
H2 {text-align: center}
H3 {text-align: center}
H4 {text-align: center}
H5 {text-align: center}
H6 {text-align: center}
Both styles tell the browser to center the contents of the header tag levels 1-6. Clearly, the first version is easier to type, understand, and modify. And it takes less time and fewer resources to transmit across a network, as well.
Normally, the style-conscious browser applies styles to the tags wherever they appear in your document, without regard to context. However, the CSS standard does define a way to have a style applied only when a tag occurs within a certain context within a document, such as when it is nested within other tags.
To create a contextual selector, list the tags in the order in which they should be nested in your document, outermost tag first. When that nesting order is encountered by the browser, the style properties will be applied to the last tag in the list.
For example, here's how you might use contextual styles to define the classic numbering sequence used for outlines: capital letters for the outer level, upper-case Roman numerals for the next level, lowercase letters for the next, and Arabic numerals for the innermost level:
OL LI {list-style: upper-alpha}
OL OL LI {list-style: upper-roman}
OL OL OL LI {list-style: lower-alpha}
OL OL OL OL LI {list-style: decimal}
According to the example style sheet, when the style-conscious browser encounters the <li> tag nested within one <ol> tag, it uses the upper-alpha value for the list-style property of the <li> tag. When it sees an <li> tag nested within two <ol> tags, the same browser will use the upper-roman list-style. Nest an <li> tag within three and four <ol> tags, and you'll see the lower-alpha and decimal list-style used, respectively.
Similarly, you may impose a specific style on tags related only by context. For instance, this contextual style definition will color the emphasis tag's (<em>) contents red only when it appears inside a level-one header tag (<h1>), not elsewhere in the document:
H1 EM {color: red}
If there is a potential ambiguity between two contextual styles, the more specific context prevails. Like individual tags, you may also have several contextual selectors mixed with individual selectors, each and all separated by commas, sharing the same list of style declarations. For example,
H1 EM, P STRONG, ADDRESS {color: red}
means that you'll see red whenever the <em> tag appears within an <h1> tag, or when the <strong> tag appears within a <p> tag, and for the contents of the <address> tag.
The nesting need not be exact to match the rule. For example, if you nest the <strong> tag within a <ul> tag within a <p> tag, you'll still match the rule for P STRONG that we defined above. If a particular nesting matches several style rules, the most specific rule is used. For example, if you defined two contextual selectors:
P STRONG {color: red}
P UL STRONG {color: blue}
and use the sequence <p><ul><strong> in your document, the second, more specific rule applies, coloring the contents of the <strong> tag blue.
Contextual selectors are supported by Netscape 4.0, but not by Internet Explorer 3.0. In fact, Internet Explorer 3.0 considers contextual selectors an error and ignores any subsequent style definitions.
class attribute
There is one more feature of style sheets that we haven't mentioned yet: classes. Classes let you create, at the document level or in an external style sheet, several different styles for a single tag, each distinguished by a class name. To apply the style class, you name it as the value of the class attribute in the tag.
In a technical paper you might want to define one paragraph style for the abstract, another for equations, and a third for centered quotations. None of the paragraph tags may have an explicit context in the HTML document so you could distinguish it from the others. Rather, you may define each as a different style class:
<style>
<!--
P.abstract {font-style: italic;
left-margin: 0.5cm;
right-margin: 0.5cm}
P.equation {font-family: Symbol;
text-align: center}
H1, P.centered {text-align: center;
left-margin: 0.5cm;
right-margin: 0.5cm}
-->
<style>
Notice first in the example that defining a class is simply a matter of appending a period-separated class name as a suffix to the tag name as the selector in a style rule. The class name can be any sequence of letters, numbers, and hyphens, but must begin with a letter.[1] And classes, like all selectors, may be included with other selectors, separated by commas, as in the third example. The only restriction on classes is that they cannot be nested: P.equation.centered is not allowed, for example.
[1] Due to its support of JavaScript style sheets, Netscape cannot handle class names that happen to match JavaScript keywords. The class "abstract," for instance, generates an error in Netscape.
Accordingly, the first rule in the example creates a class of paragraph styles named "abstract" whose text will be italic and indented from the left and right margins by a half-centimeter. Similarly, the second paragraph style class "equation," instructs the browser to center the text and to use the Symbol typeface to display the text. The last style rule creates a style with centered text and half-centimeter margins, applying this style to all level-one headers as well as creating a class of the <p> tag named centered with that style.
To use a particular class of a tag, you add the class attribute to the tag, as in this example:
<p class=abstract> This is the abstract paragraph. See how the margins are indented? </p> <h3>The equation paragraph follows</h3> <p class=equation> a = b + 1 </p> <p class=centered> This paragraph's text should be centered. </p>
For each paragraph, the value of the class attribute is the name of the class to be used for that tag.
You may also define a class without associating it with a particular tag, and then apply that class selectively through your documents for a variety of tags. For example,
.italic {font-style: italic}
creates a generic class named italic. To use it, simply include its name with the class attribute. So, for instance, use <p class=italic> or <pre class=italic> to create an italic paragraph or preformatted text block.
Generic classes are quite handy and make it easy to apply a particular style to a broad range of tags. Generic classes are currently supported only by Netscape 4.0.
In addition to conventional style classes, the CSS standard defines pseudo-classes, although no browser yet uses them. They are the way you define the display style for certain tag states. Pseudo-classes are like regular classes, with two notable differences: they are attached to the tag name with a colon instead of a period, and they have predefined names, not arbitrary ones you may give them.
There are five pseudo-classes, three of which are associated with the <a> tag. The other two go with the <p> tag.
The browsers distinguish three special states for the hyperlinks created by the <a> tag: not visited, being visited, and visited. The browser may change the appearance of the tag's contents to indicate its state, such as underlining or changing the colors. Through pseudo-classes, the HTML author can control how these states get displayed by defining styles for A:link, A:active, and A:visited. The link pseudo-class controls the appearance of links that are not selected by the user and have not yet been visited. The active pseudo-class defines the appearance of links that are currently selected by the user and are being processed by the browser. The visited pseudo-class defines those links that have already been visited by the user.
To completely define all three states of the <a> tag, you might write
A:link {color: blue}
A:active {color: red; font-weight: bold}
A:visited {color: green}
Unvisited links will be shown in blue. When the user clicks a link, the browser will change its text color to red and make it bold. Once visited, the link will revert to conventional green text.
The two other pseudo-classes go with the <p> tag, and are named first-letter and first-line. As you might expect, these pseudo-classes control the appearance of the first letter and first line, respectively, of a paragraph and create effects commonly found in printed media, such as initial drop-caps and bold first lines. For example:
P:first-line {font-style: small-caps}
converts the first line of a paragraph to small capital letters. Similarly,
P:first-letter {font-size: 200%; float: left}
tells the browser to make the first letter of a paragraph twice as large as the remaining text and float the letter to the left, allowing the first two lines of the paragraph to float around the larger initial letter.[2]
[2] The properties that can be specified for the first-letter and first-line pseudo-classes are the font properties, color and background properties, text-decoration, vertical-align, text-transform, line-height, and clear. In addition, the first-letter pseudo-class accepts the margin properties, padding properties, border properties, and float. The first-line pseudo-class also accepts the word-spacing and letter-spacing properties.
You may mix pseudo-classes with regular classes by appending the pseudo-class name to the selector's class name. For example, here are some rules that define plain, normal, and fancy anchors:
A.plain:link, A.plain:active, A.plain:visited {color: blue}
A:link {color: blue}
A:visited {color: green}
A:active {color: red}
A.fancy:link {text-style: italic}
A.fancy:visited {text-style: normal}
A.fancy:active {text-weight: bold; font-size: 150%}
The plain version of <a> is always blue, no matter the state of the link. Normal links start out blue, turn red when active, and convert to green when visited. The fancy link inherits the color scheme of the normal <a> tag, but adds italic text for unvisited links, converts back to normal text after being visited, and actually grows 50 percent in size and becomes bold when active.
A word of warning about that last property of the fancy class: specifying a font size change for a transient display property will result in lots of browser redisplay activity when the user clicks on the link. Given that some browsers run on slow machines, this redisplay may be annoying to your readers. Given also that implementing that sort of display change is something of a pain, it is unlikely that most browsers will support radical appearance changes in <a> tag pseudo-classes.
Classes inherit the style properties of their generic base tag. For instance, all the properties of the plain <p> tag apply to a specially defined paragraph class, except where the class overrides a particular property.
Classes cannot inherit from other classes, only from the unclassed version of the tag they represent. In general, therefore, you should put as many common styles into the rule for the basic version of a tag, and only create classes for those properties which are unique to that class. This makes maintenance and sharing of your style classes easier, especially for large document collections.
|
 |
|
| The Elements of Styles |  |
Style Properties |
