XHTML Mobile Profile and CSS Reference: Property Values

Property Values

Many style sheet rule properties accept a common set of standard values; these are described in this section.

Colors

Properties that set colors accept the standard 16 HTML 4.0 color keywords (color="yellow") or RGB values. RGB values can be specified in short hexidecimal format (color="#FF0"), long hexidecimal format (color="#FFFF00"), or functional format using the integers 0-255 (color="rgb(12, 34, 56)") or percentages (color="rgb(10%, 20%, 100%)"). See Table 2-1.

For more information on specifying colors in style sheets, see section 4.3.6 "Colors" in the W3C CSS2 specification (available from http://www.w3.org/TR/REC-CSS2).

Table 2-1. The HTML 4.0 color keywords and their RGB hexadecimal equivalents

Color keyword	RGB hex value	Color keyword	RGB hex value
black	`#000000`	green	`#008000`
silver	`#C0C0C0`	lime	`#00FF00`
gray	`#808080`	olive	`#808000`
white	`#FFFFFF`	yellow	`#FFFF00`
maroon	`#800000`	navy	`#000080`
red	`#FF0000`	blue	`#0000FF`
purple	`#800080`	teal	`#008080`
fuchsia	`#FF00FF`	aqua	`#00FFFF`

Units of Measure

Units of measure are for horizontal and vertical dimensions: widths, thicknesses, lengths, heights, font sizes, and so on.

There are two kinds of units of measure: proportional and absolute. Proportional units of measure (em and ex) depend on their context; absolute units of measure (millimeters, inches, points, and so on) have fixed values. Some properties also have proportional keyword values (for example, the font-size keyword values smaller, larger, and so on). Another relative value is percentage (see Percentage).

As a rule, it's a good idea to use relative values for style rules where possible. This approach supports the greatest variation of browsers with different resolutions, screen sizes, fonts, and other capabilities.

Openwave Mobile Browser supports only positive numbers for units of measure; do not use plus or minus signs in front of your numbers.

Table 2-2 shows some units of measure.

Table 2-2. Units of measure

Unit of measure	Description
em	A proportional unit of measure that is equal to the point size of the current font. For example, if the current font is 10 point Times, `1.2em` is 12 points.
ex	A proportional unit of measure that is equal to half the point size of the current font. For example, if the current font is 10 point Times, `1.2ex` is 6 points.
cm	Centimeters.
in	Inches.
mm	Millimeters.
pt	Points. In CSS, a point is exactly 1/72 of an inch.
pc	Picas. A pica is 12 points.
px	Pixels. The size of a pixel is set by the phone.

Percentage

Percentage is a proportional unit of measure used for components of an element's box (margin, border width, and so on) and for typographical measurements.

For example:

h2 {font-size: 110%}
div {margin-left: 10%}

Percentage values are calculated relative to different standards, depending on the context. For lengths of box elements, percentages are relative to the width of the box element's content; for fonts and line height, percentages are relative to the current point size. The CSS property reference, in the second part of this chapter, includes notes on how percentages are calculated for each property that accepts percentage values.

URLs

Uniform Resource Locators (URLs) identify files available on the World Wide Web or in local storage.

For example:

div.main {background-image: url("images/sand.gif")
ul {list-style-image: url("http://www.example.com/images/star.gif")}

For properties whose values can include images, such as background-image and list-style-image, you can use an Openwave extension to the URL syntax to take advantage of the Openwave icons and WAP pictograms included with the browser.

The following example sets an Openwave bird icon as the bullet for unordered list items:

ul li {list-style-image: localsrc("bird") }

This example sets a right-pointing arrow as the bullet:

ul li {list-style-image: localsrc("pict:///core/arrow/right") }

For more information, see Appendix A, Openwave Mobile Browser Icons, and Appendix B, WAP Pictograms.

Keywords

Many properties support their own keyword values, but two common keywords include:

inherit, which forces the element to inherit the property value from its containing element (as described in section 6.2.1, "The `inherit' Value," in the W3C CSS2 specification)
auto, which instructs the browser to calculate a box-model dimension, as described in section 10.3, "Computing Widths and Margins," of the W3C CSS2 specification)

You can obtain a copy of the W3C CSS2 specification from http://www.w3.org/TR/REC-CSS2.