Style Specifications

We've seen a number of style attributes in overview now, and it's time to take a look at what attributes are available in a more systematic way. We'll see many such attributes in tables, and it's going to be important to know how to understand those tables. For example, take a look at the single-item Table 21.1, showing the background- color attribute.

Table 21.1. Style Specification Example

Attribute	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
background-color				x	x		x	x	x	x
	CSS1: <color> transparent
	CSS2: inherit
	Default: transparent
	Applies to: All elements
	Specifies the background color of an element, either a <color> value or the keyword transparent , which makes the underlying color shine through.

As you can see in Table 21.1, I'm going to list which browsers you can use the style attribute in, as well as the possible values each style attribute can take in CSS1 and the values added in CSS2. (You don't have to pay attention to CSS version if you just want to use the browser version information instead.) In Table 21.1, for example, you see that CSS1 supported <color> transparent for the background-color attribute and CSS2 adds inherit (which means the background-color attribute will inherit its setting from its enclosing element). Note that I'll also list the default value of the style attribute, if there is one, and which HTML elements the style attribute applies to.

Note also that in the upcoming style attribute tables, I'll use the same syntax that W3C uses when describing style attributes. (You might recognize some of this syntax from our discussion of regular expressions in the previous chapter.)

• Terms in angle brackets, <>, indicate a specific data format listed in Table 21.2.

• Values separated with a pipe symbol, , give alternatives, but only one may be used at a time.

• Values separated with double pipe symbols, , give alternatives, one or more of which must be used.

• Square brackets, [], group statements together.

• An asterisk, *, means the preceding term should be present zero or more times.

• A plus sign, +, means the preceding term should be present one or more times.

• A question mark, ?, means the preceding term is optional.

• Curly braces, {}, surround the minimum and maximum number of times a term may occur (such as {1, 4} ).

Table 21.1 lists the possible values for the background-color attribute as <color> transparent , which we now know means <color> or transpar ent . But what do the angle brackets around <color> mean? They indicate a data format, and you can find the possible data formats in Table 21.2, where we learn that <color> can be a predefined color value (such as "cyan" ) or RGB triplet color value (such as "ffffff" ). You can assign all kinds of different data from integers to percentages to style attributes, and you'll find the possible data formats in Table 21.2.

Table 21.2. Style Attribute Data Formats

Data Format	Means
<absolute- size >	Absolute font sizes. May be xx-small , x-small , small , medium , large , x-large , xx-large .
<angle>	Angles. May be deg , grad , or rad .
< border-style >	A box's border. May be none , dotted , dashed , solid , double , groove , ridge , inset , or outset .
< border-width >	Sets the width of a border. May be thin , medium , thick , or an explicit length.
<color>	Color. May be specified with a predefined color value or RGB triplet color value.
<family- name >	Font family name, such as Arial, Times New Roman, or Courier.
<frequency>	Frequency values, units may be Hz or KHz.
<generic-family>	Generic names for fonts that you use as a last resort if the browser can't find a specific font. Examples are serif , sans- serif , and monospace .
<generic-voice>	Voices. May be male , female , or child .
<integer>	Integer values.
<length>	Length. May start with a + or -, followed by a number (may include a decimal point) followed by a unit identifier, which may be em (font size of the relevant font), ex (the x-height of the font), px (pixels as specified relative to the viewing device), pt (points, 1/72nds of an inch), in (inches), cm (centimeters), mm (millimeters), or pc (picas, 1/6th of an inch).
<number>	A number. May include a sign and a decimal point.
<percentage>	A percentage measurement. A number (may include a sign) followed by a percentage sign (%).
<relative-size>	A font size relative to the parent element. May be larger or smaller .
<shape>	May specify a rectangle, such as this: rect(<top> <right> <bottom> <left> ).
<time>	Time. Specified as a number followed by ms (for milliseconds ) or s (for seconds).
<uri>	Uniform Resource Indicator (URI). This is the web address of a page element, such as an image.

Before we begin looking at the formal uses for various style attributes, you should also know the term box . When working with styles, an element's box is the invisible rectangle that encloses that element, and which it's drawn in. Because many style attributes have to do with margins and borders, they will refer to the element's box. Another term to know is block . A block-level HTML element takes up its own lineor blockby default in a browser, such as <BR> or <H1> . Some style attributes (such as clear ) apply only to block-level elements, as I'll indicate.

Now we're ready to take a look at style attributes in depth, including what values you can set them to and which elements they apply to.