Section 8.2. Style Syntax
The syntax of a style ? its "rule," as you may have gleaned from our previous examples ? is very straightforward.
8.2.1 The Basics
A style rule is made up of at least two basic parts: a selector, which is the name of the HTML or XHTML markup element (tag name) that the style rule affects, followed by a curly brace ({})-enclosed, semicolon-separated list of one or more styleproperty:value pairs:
selector {property1:value1; property2:value1 value2 value3; ...}
For instance, we might define the color property for the contents of all the level-1 header elements of our document to be the value green:
h1 {color: green}
In this example, h1 is the selector, which is also the name of the level-1 header element, color is the style property, and green is the value. Neat and clean.
Properties require at least one value but may have two or more values. Separate multiple values with a space, as is done for the three values that define property2 in our first example. Some properties require that multiple values be separated with commas.
Current styles-conscious browsers ignore letter case in any element of a style rule. Hence, H1 and h1 are the same selector, and COLOR, color, ColOR, and cOLor are equivalent properties. At one time, convention dictated that HTML authors write selector names in uppercase characters, such as H1, P, and STRONG. This convention is still common and is used in the W3C's own CSS2 document.
However, current standards dictate, particularly for XML-compliant documents, that element names be identical to their respective DTD definitions. With XHTML, for instance, all element names (e.g., h1, p, or strong) are lowercase, so their respective CSS2 selectors must be in lowercase. We'll abide by these latter conventions.
Any valid element name (a tag name 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.
8.2.2 Multiple Selectors
When separated by commas, all the elements named in the selector list are affected by the property values in the style rule. This makes life easy for authors. 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 header levels 1-6. Clearly, the first version is easier to type, understand, and modify. It also takes less time and fewer resources to transmit across a network.
8.2.3 Contextual Selectors
Normally, the styles-conscious browser applies document-level or imported styles to a tag's contents wherever they appear in your document, without regard to context. However, the CSS2 standard defines 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 are applied to the last tag in the list.
For example, here's how you might use contextual styles to create a classic outline, complete with uppercase Roman numerals for the outer level, capital letters for the next level, Arabic numerals for the next, and lowercase letters for the innermost level:
ol li {list-style: upper-roman}
ol ol li {list-style: upper-alpha}
ol ol ol li {list-style: decimal}
ol ol ol ol li {list-style: lower-alpha}
According to the example style sheet, when the styles-conscious browser encounters the <li> tag nested within one <ol> tag, it uses the upper-roman value for the list-style property of the <li> tag. When it sees an <li> tag nested within two <ol> tags, the browser uses the upper-alpha list style. Nest an <li> tag within three and four <ol> tags, and you'll see the decimal and lower-alpha list styles, respectively. That's exactly what Netscape does, as shown in Figure 8-1 (Internet Explorer does the same thing). Compare Figure 8-1 with using the <ol> tag's type attribute to achieve similar effects, as shown in Figure 7-7.
Figure 8-1. Nested ordered list styles
Similarly, you may impose a specific style on tags related only by context. For instance, this contextual style definition colors the emphasis (<em>) tag's contents red only when it appears inside a level-1 header tag (<h1>), 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 have several contextual selectors mixed with individual selectors, all separated by commas, sharing the same list of style declarations. For example:
h1 em, p strong, address {color: red}
means you'll see red whenever the <em> tag appears within an <h1> tag, 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.
8.2.4 Universal, Child, and Adjacent Selectors
The CSS2 standard defines additional patterns for selectors besides commas and spaces, as illustrated in the following examples:
* {color: purple; font: ZapfDingBats}
ol > li {font-size: 200%; font-style: italic}
h1 + h2 {margin-top: +4mm}
In the first example, the universal asterisk selector applies the style to all elements of your document, so that any text gets displayed in Zapf Dingbat characters.[4] The second example selects a particular child/parent relationship; in this case, items in an ordered list. The third example illustrates the adjacent selector type, which selects for one tag immediately following another in your document. In this case, the special selector adds vertical space to instances in which your document has a level-2 header immediately following a level-1 header.
[4] Assuming, of course, that the style is not overridden by a subsequent rule.
8.2.5 Attribute Selectors
It is possible to attach a style to only those HTML/XHTML elements that have specific attributes. You do this by listing the desired attributes in square brackets ([]) next to the element name, before the style definition:
div[align] { font-style: italic }
div[align=left] {font-style: italic }
div[title~="bibliography"] { font-size: smaller }
div[lang|="en"] {color: green }
The first example is the simplest: it italicizes the subsequent text contents of only those <div> tags that contain the align attribute, regardless of the value assigned to the attribute. The second example is a bit pickier; it matches only <div> tags whose align attributes are set to left.
The third example matches any <div> tag whose title attribute contains the word "bibliography," specifically delimited by one or more spaces. Partial word matches do not count; if you used div[title~="a"], you would match only <div> tags whose title attributes contained a single "a" delimited by spaces (or at the beginning or end of the title).
The final example is used almost exclusively for matching groups of languages specified in the lang attribute. It matches any <div> tag whose lang attribute is set to a hyphen-separated list of words, beginning with "en." This example would match attributes such as lang=en, lang=en-us, or lang=en-uk.
You can combine the universal selector with attribute selectors to match any element with a specific attribute. For example:
*[class=comment] { display: none }
would hide all the elements in your document whose class attributes are set to comment.
Netscape Version 6 supports attribute selectors; Internet Explorer does not.
8.2.6 Pseudoelements
There are elemental relationships in your documents that you cannot explicitly tag. The drop-cap is a common print style, but how do you select the first letter in a paragraph? There are ways, but you have to identify each instance separately. There is no tag for the first line in a paragraph. And there are occasions where you might want the browser to automatically generate content, such as to add the prefix "Item #" and automatically number each item in an ordered list.
CSS2 introduces four new pseudoelements that let you define special relationships and styles for their display (:first-line, :first-letter, :before, and :after). Declare each as a colon-separated suffix of a standard markup element. For example:
p:first-line {font-size: 200%; font-style: italic}
means that the browser should display the first line of each paragraph italicized and twice as large as the rest of the text. 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 to float the letter to the left, allowing the first two lines of the paragraph to float around the larger initial letter (see Figure 8-2).[5]
[5] The properties that can be specified for the :first-letter and :first-line pseudoelements are the font, color, and background properties, text-decoration, vertical-align, text-transform, line-height, and clear. In addition, the :first-letter pseudoelement accepts the margin properties, padding properties, border properties, and float. The :first-line pseudoelement also accepts the word-spacing and letter-spacing properties.
Figure 8-2. Use the first-letter pseudoelement to select the first letter of text within a tag's content
The :before and :after pseudoelements let you identify where in your document you insert generated content such as list numbers and special lead-in headers. Hence, these pseudoelements go hand in hand with the CSS2 content and counter properties. To whet your appetite, consider this example:
ol {counter-reset: item}
ol li:before {content: "Item #" counter(item) " ";
counter-increment: item}
Internet Explorer 5 and later and Netscape 6 support the :first-line and :first-letter pseudoelements, but only Netscape 6 supports the :before and :after ones.
