O'Reilly logo

HTML & XHTML: The Definitive Guide, 6th Edition by Bill Kennedy, Chuck Musciano

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required