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 ...
Get HTML & XHTML: The Definitive Guide, 6th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.