The purpose of this chapter is to provide a list of every web page style sheet property that is implemented in mainstream browsers, as well as those specified in the W3C recommendations for Cascading Style Sheets. 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 Internet Explorer (IE), pre-Mozilla Netscape Navigator (NN), Mozilla (Moz), Apple Safari (Saf), Opera (starting from version 7), and W3C CSS specification in which the term was first introduced. Several properties removed from the specification with the publication of CSS Level 2.1 are marked with CSS version <2.1 (less than 2.1) and should not be used.
Property Value Types
Many style sheet properties share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common property value types in more detail than is possible within each listing. When you see one of these property value types associated with a property, consult this section for a description of the type.
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 property, 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 property (computed at the time of the property 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 property for that element (or other outer container that intervenes from the body ). Mozilla, Safari, Opera, and IE for the Macintosh behave according to the recommendation. But IE for Windows, even in IE 7’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 . (This type of inconsistency is indicative of occasional cross-browser difficulties with CSS in implementing pixel-perfect identical representations on all platforms.)
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 300to 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 ).
URI and URL (and IRI)
Universal Resource Identifier (URI) is a broad term for an address of content on the Web (while an Internationalized Resource Identifier—IRI—is an address that can include Unicode characters to accommodate non-ASCII characters). 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, with one exception: if the style rule is imported from a .css file (perhaps from a different directory), a relative URL uses the path to the .css file as the base. The CSS property syntax prescribes a special format for specifying a URI property value, as follows:
Quotes surrounding the actualURL are optional, but recommended.