Style Sheet Attribute Reference (Dynamic HTML: The Definitive Reference, 2nd Edition)

The purpose of this chapter is to provide a list of every style sheet attribute that is implemented in Version 4 and later of both Netscape Navigator and Internet Explorer, as well as those specified in the W3C recommendations for Cascading Style Sheets, both Level 1 (CSS1) and Level 2 (CSS2). So that you can readily see whether a particular entry applies to the browser(s) you must support, a version table accompanies each term listed in the following pages. This table tells you at a glance the version of Navigator, Internet Explorer, and W3C CSS specification in which the term was first introduced.

This chapter is organized alphabetically by CSS attribute name. For each attribute, you can see quickly what the value types are, an example of real-life source code, and how to address the attribute from the JavaScript language (if the attribute is scriptable). A few items implemented in available browsers are proposed for CSS Level 3, and are marked accordingly. Some additional items for the Netscape 6 browser are preliminary versions of forthcoming CSS3 attributes. To deploy these features now, but prevent possible naming collisions with final CSS3 specifications, the Mozilla engineers have given these attributes a -moz prefix. This prefix will not validate under CSS Level 2 due to the leading hyphen. This is intentional.

11.1. Attribute Value Types

Many element attributes share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common attribute value types in more detail than is possible within each listing. When you see one of these attribute value types associated with an attribute, consult this section for a description of the type.

11.1.1. Length

A length value defines a linear measure of document real estate—usually a horizontal or vertical measurement of distance, height, width, thickness, or size. Length units may be relative or absolute. A relative unit depends upon variables such as the dot pitch or pixel density of the video display that shows a document. Relative units in CSS are pixels (px), ems (em), and exes (ex). An em is the actual height of the element's font (or inherited font) as rendered on a given display device; an ex is the height of a lowercase "x" under the same conditions. The exception to this rule is when em and ex units are used to define the font-size attribute, in which case the units are relative to the font size of the parent element.

Pay special attention when a relative value is to be inherited by a child element. In those circumstances, the CSS recommendation says that the child element inherits the computed value of the attribute (computed at the time of the attribute definition in the parent element's assignment), rather than an adjusted value. For example, if the body element specifies a font-size of 20pt and a text-indent of 2em (equaling 40pt), the text-indent value inherited by p or other elements within the body element is equal to 40pt, regardless of what the current font-size of the other elements may be. To override the inherited computed value, the p or other element needs to reassign a text-indent attribute for that element (or other outer container that intervenes from the body). IE for the Macintosh and Netscape 6 behave according to the recommendation. But IE for Windows, even in IE 6's standards-compatible mode, ignores this convention. Instead, this browser family recomputes the inherited relative style assignment. Thus, in the example we just discussed, a p element with a font-size set to 10pt does not inherit the 40pt computed text-indent value from the body. Rather, the unstated text-indent value for the p element is recomputed for its 10pt font-size—an effective text-indent value of 20pt.

Pixel values, while frequently used for font sizes, present their own potential problems. A pixel, as noted earlier, varies in size with the pixel density of the output device. The higher the density, the smaller each pixel is. For printing output on 300- to 600-dpi printers, browsers perform internal scaling calculations to assign more dots per pixel so that a text character sent to the printer approximates the size as viewed on the screen. But don't expect absolutely perfect sizes on all monitors or printers. Allow for scaling approximations for all length value assignments.

Absolute length units are intended for output media with constant physical properties (such as a PostScript printer). Although there is nothing preventing you from using absolute or relative units interchangeably, you need to be aware of the consequences given your audience. Absolute length units in CSS are inches (in), centimeters (cm), millimeters (mm), picas (pi), and points (pt).

11.1.2. URI and URL

Universal Resource Identifier (URI) is a broad term for an address of content on the Web. A Universal Resource Locator (URL) is a type of URI. For most web authoring, you can think of them as one and the same, because most web browsers restrict their focus to URLs. A URL may be complete (including the protocol, host, domain, and the rest) or may be relative to the URL of the current document. In the latter case, this means the URL may consist of an anchor, file, or pathname. The CSS attribute syntax prescribes a special format for specifying a URI attribute value, as follows:

attributeName: url("actualURL")

Quotes surrounding the actualURL are optional, but recommended.

11.1.3. Colors

A color value can be assigned either via an RGB (red-green-blue) value or a plain-language equivalent (see Appendix A). For style sheet RGB values, you have a choice of three formats: hexadecimal triplet, decimal values, or percentage values. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between values of 00 and ff, corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign (#). Therefore, the reddest of reds has all red (ff) and none (00) of the other two colors: #ff0000; pure blue is #0000ff. Letters a through f can also be uppercase letters. (An approved shortcut—but one I don't recommend for the sake of readability—allows you to specify one hexadecimal character when the value is intended to be a matching pair of characters. For example, #f0a is interpreted as #ff00aa.)

The other types of RGB values require a prefix of rgb( ) with a comma-delimited list of red, green, and blue values in the parentheses. As decimal values, each color can range from 0 through 255, with zero meaning the complete absence of a particular color. You can also specify each value by a percentage. The following examples show four different ways of specifying pure green:

color: green
color: #00ff00
color: rgb(0, 255, 0)
color: rgb(0%, 100%, 0%)

If you exceed the maximum allowable values in the last two examples, the browser trims the values back to the maximums.

These numbering schemes obviously lead to a potentially huge number of combinations (over 16 million), but not all video monitors are set to distinguish among millions of colors. Therefore, you may wish to limit yourself to a more modest palette of colors known as the web palette. A fine reference of colors that work well on all browsers at popular bit-depth settings can be found at http://www.lynda.com/hexh.html.

The CSS2 specification adds another dimension to color naming: you can specify colors that the user has assigned to specific user interface items in the operating system's control panel. Such colors are typically adjustable for items like button label text, scrollbars, 3-D shadows, and so on. A color-blind user, for example, may have a carefully crafted set of colors that provide necessary contrast to see screen elements. To link those colors to a style, use any of the following keywords in place of the color attribute value:

`activeborder`	`activecaption`	`appworkspace`
`background`	`buttonface`	`buttonhighlight`
`buttontext`	`captiontext`	`graytext`
`highlight`	`highlighttext`	`inactiveborder`
`inactivecaption`	`inactivecaptiontext`	`infobackground`
`infotext`	`menu`	`menutext`
`scrollbar`	`threeddarkshadow`	`threedface`
`threedhighlight`	`threedlightshadow`	`threedshadow`
`window`	`windowframe`	`windowtext`

Chapter 11. Style Sheet Attribute Reference

Contents:

11.1. Attribute Value Types

11.1.1. Length

11.1.2. URI and URL

11.1.3. Colors