HTML The Definitive Guide (90 page)
Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
If multiple styles still exist, sort by order. The property specified latest takes precedence.
●
The relationship between style properties and conventional tag attributes is almost impossible to predict. Style sheet-dictated background and foreground colors - whether defined externally, at the document level, or inline - override the various color attributes that may appear within a tag. But the align attribute of an inline image usually takes precedence over a style-dictated alignment.
There is an overwhelming myriad of style and tag presentation-attribute combinations. You need a crystal ball to predict which combination wins and which loses the precedence battle. The rules of redundancy and style vs. attribute precedence are not clearly elucidated in the W3C CSS standard, nor is there a clear pattern of precedence implemented in the styles-conscious browsers. This is particularly unfortunate since there will be an extended period, perhaps several years long, in which users may or may not use a styles-conscious browser. HTML authors will have to implement both styles and non-style presentation controls to achieve the same effects.
Nonetheless, our recommendation is to run - as fast as you can - away from one-shot, inline, localized kinds of presentation effects like those afforded by the tag and color attribute. They have served their temporary purpose; it's now time to bring consistency (without the pain!) back into your document presentation. Use styles. It's the HTML way.
8.8 Appropriate List Usage
9.2 Style Syntax
9.2 Style Syntax
The syntax of a style, as you may have gleaned from our previous examples, is fairly straightforward.
9.2.1 The Basics
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.
Styles-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 all uppercase, and that properties and values be 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.
9.2.2 Multiple Selectors
When separated by commas, all the tags named in the selector list are 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.
9.2.3 Contextual Selectors
Normally, the styles-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, uppercase 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 styles-conscious browser encounters the
- tag, it uses the upper-alpha value for the list-style property of the
- tag. When it sees an
- tag nested within two
- tags, the same browser will use the upper-roman list-style. Nest an
- tag within three and four
- 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 () contents red only when it appears inside a level-one header tag (), not elsewhere in the document: H1 EM {color: red}
If there is 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 tag appears within an
tag, or when the tag appears within a
tag, and for the contents of the
tag.The nesting need not be exact to match the rule. For example, if you nest the tag within a
- tag within a
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
- in your document, the second, more specific rule applies, coloring the contents of the tag blue.
9.2.4 Style Classes
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, name it as the value of the class attribute in the tag.
9.2.4.1 Regular classes
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:
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 allselectors, 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
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:
This is the abstract paragraph. See how the margins are indented?
The equation paragraph follows
a = b + 1
This paragraph's text should be centered.
For each paragraph, the value of the class attribute is the name of the class to be used for that tag.
9.2.4.2 Generic classes
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 {fontstyle: italic}
creates a generic class named italic. To use it, simply include its name with the class attribute.
So, for instance, use
or
to create an italic paragraph or header.
Generic classes are quite handy and make it easy to apply a particular style to a broad range of tags.
Netscape 4.0 and the latest versions of Internet Explorer (4.01) support CSS generic classes.
9.2.4.3 Using IDs as classes
Almost all HTML tags accept the id attribute, which assigns an identifier to the element that is unique within the document. This identifier can be the target of a URL, used by automated document processing tools, and can also be used to specify a style rule for the element.
To create a style class that can be applied with the id attribute, follow the same syntax used for style classes, except with a # character before the class name instead of a period. This style creates such classes:
Within your document, you could use
to create a blue heading, or add id=yellow to almost any tag to turn it yellow. You can mix and match both class and id attributes, giving you a limited ability to apply two independent style rules to a single element.
There is a dramatic drawback to using classes defined this way: the value of the id attribute must be unique to exactly one tag within the document. You cannot legally reuse the class, although the browser might let you get away with it.
For this reason, we strongly discourage creating and using these kinds of classes. Stick to the conventional style of classes to create correct, robust HTML documents.
9.2.4.4 Style pseudo-classes
- tag within three and four
