Declarations

• Intro
• Font and Text
• Background
• Layout
• Positioning
• Aural
• Miscellany
• zNotes

Intro

A CSS Declaration is the the heart of CSS. A CSS Declaration consists of a property and value pair that influences the presentation of elements of a document. EG: color:red;, color is the property, red is the value, and the whole thing is a CSS Declaration.

The syntax of a CSS Declaration depends on the context. When used in script, usually any dashes in the property name are removed.

• HTML: property: value
• Script: object.style.CSSProperty [ = CSSValue]

The declarations that apply to particular elements follow CSS cascade rules in order.

1. Declarations are applied by media type and selector.
2. Declarations are applied according to weight and origin. Author style sheets take precedence over author style sheets unless the author declaration invokes !important in the declaration. EG: body { background: white !important; }.
3. Declarations are applied by specificity, i.e. more specific selectors have precedence.
4. Declarations are applied by order, i.e. later selectors have precedence.

Here are some features of the CSS Properties tables below.

• A property has been available since Microsoft Internet Explorer 4, unless the version number is marked in the Notes column or with a superscript on particular property values.
• A property is a W3C standard unless it has only been "P" (proposed) or "X" (not proposed).
• A property is assumed to be read-write unless marked "R" or "W".
• Properties that have a default value will list them in bold .
• Properties geared toward Chinese-Japanese-Korean glyphs are marked "CJK".

Font and Text

Background

Layout

See also IE Dimensions.

Positioning

See also Box Dimensions, and Measurements.

Aural

Aural rendering is usually for the blind and situations without a visual interface (EG: Browser in car).

Miscellany

blockquote p:before     { content: open-quote }
blockquote p:after      { content: no-close-quote }
blockquote p.last:after { content: close-quote }

ol { counter-reset: item } 
li { display: block } 
li:before { content: counters(item, "."); counter-increment: item } 

zNotes

zNotes 1

CSS2 has a new CSS property font-size-adjust which allows authors to specify an aspect value (x-height to size ratio) for an element that will preserve the x-height of the first choice font in the subsequent substitute fonts. The formula used is: s(a/a') = s', where s is the size of the first choice font, a is aspect value of the first choice font, a' is the aspect value of the subsequent substitute font, and s' is the resultant size of the subsequent substitute font.

Actually it seems absurd that you have to provide the aspect ratio. Do people really know what that number is? The proper value of this property should be "true", since CSS seems to assume that the browser knows what the aspect ratios of the different fonts are. [My idea 2003-06-12T02:50:11Z]

Here are common fonts at 11 pt and 72 dpi. If the font-size property was not used, then the fonts substituting for Verdana would display as shown. (The red numbers are the aspect values for each font.)	If the font-size-adjust property was used with Verdana's 0.58 value, then the fonts substituting for Verdana would display as shown. (The blue numbers are the resultant em sizes for each font.)
These two images were borrowed from the W3C.

zNotes 2

Here are some of the filters available. Note again that the width property must be set for the element.

zNotes 3

The @media property has 10 possible values for media types which may be categorized by media groups.

Page Modified: (Hand noted: 2007-10-23 22:56:17Z) (Auto noted: 2009-11-09 22:11:57Z)