Webmaster in a Nutshell, Second Edition

Style Syntax

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.

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.

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}

tells the browser ...