HTML & XHTML: The Definitive Guide, 6th Edition

Style Syntax

The syntax of a style—its “rule,” as you may have gleaned from our previous examples—is very straightforward.

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 style property:value pairs:

selector {property1:value1; property2:value1; ...}

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.

Most properties require at least one value, but may have two or more values. Comma-separated values typically indicate a series of options as accepted by the property, of which the first valid value applies to the property, whereas space-separated values each apply separately to the property. The last valid value may override a previous value:

selector {property3:value1 value2 value3}
selector {property4:value1, value2, value3}

For instance, the following display background will be black, not white or gray, even though you specify both white and black values in the rule:

body {background: white black}

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 ...