How to Use This Appendix How to Use This Appendix Each CSS property's description contains the following attributes: ● Usage A description of the property ● CSS1 values Legal CSS1 values and syntax ● CSS2 values Legal CSS2 values and syntax ● Initial The initial value ● Applies to Elements to which the property applies ● Inherited Whether the property is inherited ● Notes Additional information Deciphering CSS values is an exercise that requires patience and a strict adherence to the rules of logic. As you refer to the values for each property listed in this appendix, you should use the following scheme to understand them. Values of different types are differentiated as follows: ● Keyword values Keywords are identifiers, such as red, auto, normal, and inherit. They do not have quotation marks. ● Basic data types These values, such as <number> and <length>, are contained within angled brackets to indicate the data type of the actual value used in a style statement. It's important to note that this refers to the data type and is not the actual value. The basic data types are described at the end of this appendix. ● Shorthand reference Values that are enclosed in angled brackets and single quotation marks, such as <'background-color'> within the background property, indicate a shorthand method for setting the desired value. The values identified in _ background-color are available for use in the background property. If you choose to set the background color for the document body, for example, you can choose to do so by using either body { background: red } or body { background-color: red } . ● Predefined data types Values within angled brackets without quotation marks, such as <border- width> within the 'border-top-width' property, are similar to the basic data types but contain predefined values. The available values for <border-width>, for example, are thin, thick, medium, and <length>. When more than one value is available, they are arranged according to the following rules: ● Adjacent words Several adjacent words indicate all values must be used but can be in any order. ● Values separated by a bar "|" A bar separates two or more alternatives, only one of which can occur. ● Values separated by double bars "||" The double bar separates two or more options, of which one or more must occur in any order. ● Brackets "[]" Brackets group the values into statements that are evaluated much like a mathematical expression. When evaluating the values listed in this appendix, the order of precedence is that adjacent values take priority over those separated by double bars and then single bars. In addition to this, modifiers may follow each value or group of values. These are the following: ● * (asterisk) The preceding type, word, or group occurs zero or more times. file:///G|/1/0672328860/app03lev1sec1.html (1 von 2) [19.12.2006 13:50:38] How to Use This Appendix ● + (plus sign) The preceding type, word, or group occurs one or more times. ● ? (question mark) The preceding type, word, or group is optional. ● {} (curly braces) Surrounding a pair of numbers, such as {1,2}, indicates the preceding type, word, or group occurs at least once and at most twice. file:///G|/1/0672328860/app03lev1sec1.html (2 von 2) [19.12.2006 13:50:38] Block-Level Properties Block-Level Properties Block-level elements are those that are formatted visually as blocks. A paragraph or a list, for example, is a block. bottom, left, right, top Usage Specifies how far a box's bottom, left, right, or top content edge is offset from the respective bottom, left, right, or top of the box's containing block. CSS2 Values <length> | <percentage> | auto | inherit Initial auto Applies to All elements. Inherited No. Notes Percentage refers to height of containing block. direction Usage Specifies the direction of inline box flow, embedded text direction, column layout, and content overflow. CSS1 Values ltr | rtl CSS2 Values inherit Initial ltr Applies to All elements. Inherited Yes. Notes See unicode-bidi for further properties that relate to embedded text direction. display Usage Specifies how the contents of a block are to be generated. CSS1 Values inline | block | list-item CSS2 Values run-in | compact | marker | table | inline-table | table-rowgroup | table-column-group | table-header-group | tablefooter-group | table-row | table-cell | table-caption | none | inherit Initial inline Applies to All elements. file:///G|/1/0672328860/app03lev1sec2.html (1 von 3) [19.12.2006 13:50:38] Block-Level Properties Inherited No. float Usage Specifies whether a box should float to the left, right, or not at all. Floated elements are affixed to one side of the enclosing block so that other elements on the page can flow around them. CSS1 Values none | left | right CSS2 Values inherit Initial none Applies to Elements that are not positioned absolutely. Inherited No. position Usage Determines which CSS2 positioning algorithms are used to calculate the coordinates of a box. CSS2 Values static | <relative> | <absolute> | fixed | inherit Initial static Applies to All elements except generated content. Inherited No. unicode-bidi Usage Opens a new level of embedding with respect to the bidirectional algorithm when elements with reversed writing direction are embedded more than one level deep. CSS2 Values normal | embed | bidi-override | inherit Initial normal Applies to All elements. Inherited No. z-index Usage Specifies the stack level of the box and whether the box establishes a local stacking context. CSS2 Values auto | <integer> | inherit file:///G|/1/0672328860/app03lev1sec2.html (2 von 3) [19.12.2006 13:50:38] Block-Level Properties Initial auto Applies to Elements that generate absolutely and relatively positioned boxes. Inherited No. file:///G|/1/0672328860/app03lev1sec2.html (3 von 3) [19.12.2006 13:50:38] Background and Color Properties Background and Color Properties HTML enables you to specify background and color properties for text, link, and backgrounds on a global basis in the document head; CSS provides similar properties that enable you to customize colors for individual elements (or for the entire page, if you prefer). The following properties affect foreground and background colors of elements. background Usage Shorthand property for setting the individual background properties at the same place in the style sheet. CSS1 Values [ <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] CSS2 Values inherit Initial Not defined. Applies to All elements. Inherited No. background-attachment Usage If a background image is specified, this property specifies whether it is fixed in the viewport or scrolls along with the document. CSS1 Values scroll | fixed CSS2 Values inherit Initial scroll Applies to All elements. Inherited No. background-color Usage Sets the background color of an element. CSS1 Values <color> | transparent CSS2 Values inherit Initial transparent Applies to All elements. Inherited No. file:///G|/1/0672328860/app03lev1sec3.html (1 von 3) [19.12.2006 13:50:39] Background and Color Properties background-image Usage Sets the background image of an element. CSS1 Values <uri> | none CSS2 Values inherit Initial none Applies to All elements. Inherited No. Notes Authors also should specify a background color that will be used when the image is unavailable. background-position Usage Specifies the initial position of the background image, if one is specified. CSS1 Values [[ <percentage> | <length>](1,2) | [top | center | _bottom] || [left | center | right]] CSS2 Values inherit Initial 0% 0%. Applies to Block-level and replaced elements. Inherited No. background-repeat Usage Specifies whether an image is repeated (tiled) and how, if a background image is specified. CSS1 Values repeat-x | repeat-y | repeat | no-repeat CSS2 Values inherit Initial repeat Applies to All elements. Inherited No. color Usage Describes the foreground color of an element's text content. CSS1 Values <color> file:///G|/1/0672328860/app03lev1sec3.html (2 von 3) [19.12.2006 13:50:39] Background and Color Properties CSS2 Values inherit Initial Depends on browser. Applies to All elements. Inherited Yes. file:///G|/1/0672328860/app03lev1sec3.html (3 von 3) [19.12.2006 13:50:39] Box Model Properties Box Model Properties Each page element in the document tree is contained within a rectangular box and laid out according to a visual formatting model. The following elements affect an element's box. border Usage A shorthand property for setting the same width, color, and style on all four borders of an element. CSS1 Values [ 'border-width' || 'border-style' | <color>] CSS2 Values inherit Initial Not defined for shorthand properties. Applies to All elements. Inherited No. Notes This property accepts only one value. To set different values for each side of the border, use the border-width, border-style, or border-color property. border-bottom, border-left, border-right, border-top Usage Shorthand properties for setting the width, style, and color of an element's bottom, left, right, or top border (respectively). CSS1 Values [ 'border-bottom-width' || 'border-style' || <color>] [ 'border-left-width' || 'border-style' || <color>] [ 'border-right-width' || 'border-style' || <color>] [ 'border-top-width' || 'border-style' || <color>] CSS2 Values inherit Initial Not defined. Applies to All elements. Inherited No. border-color Usage Sets the color of the four borders. CSS1 Values <color> (1,4) | transparent CSS2 Values inherit Initial The value of the <color> property. file:///G|/1/0672328860/app03lev1sec4.html (1 von 5) [19.12.2006 13:50:39] Box Model Properties Applies to All elements. Inherited No. Notes This property accepts up to four values, as follows: One value: Sets all four border colors. Two values: First value for top and bottom; second value for right and left. Three values: First value for top; second value for right and left; third value for bottom. Four values: Top, right, bottom, and left, respectively. border-bottom-color, border-left-color, border-right-color, border-top-color Usage Specifies the colors of a box's border. CSS1 Values <color> CSS2 Values inherit Initial The value of the <color> property. Applies to All elements. Inherited No. border-style Usage Sets the style of the four borders. CSS1 Values none | dotted | dashed | solid | double | groove | ridge | inset | outset CSS2 Values inherit Initial none Applies to All elements. Inherited No. Notes This property can have from one to four values (see notes under border-color for explanation). If no value is specified, the color of the element itself will take its place. border-bottom-style, border-left-style, border-right-style, border-top-style Usage Sets the style of a specific border (bottom, left, right, or top). Values Same as border-style. Initial none file:///G|/1/0672328860/app03lev1sec4.html (2 von 5) [19.12.2006 13:50:39] . have quotation marks. ● Basic data types These values, such as <number> and <length>, are contained within angled brackets to indicate the data type of the actual value used in a style. and <length>. When more than one value is available, they are arranged according to the following rules: ● Adjacent words Several adjacent words indicate all values must be used but can. Values that are enclosed in angled brackets and single quotation marks, such as <'background-color'> within the background property, indicate a shorthand method for setting the