CSS Tutorial

Appendix 2: Property References

This is a complete list of all CSS1 and CSS 2.1 properties. Many CSS3 properties have also been included, but some were excluded because they seem to me more subject to change since the specifications have not been finalized. Some proprietary properties have also been included because they are becoming more widely used.

Available property values are separated by a pipe "|". If a property (such as "font") can take more than one value as a CSS shortcut, those values will be separated by a double pipe "||".

Default properties are marked strong (bold in visual browsers). If no default is indicated it means that it varies across UAs. Emphasized values (in italics for visual browsers) represent value types that are to be replaced with actual values. An asterisk after a property name means that that property inherits its value by default. The property value "inherit", on the other hand, means that the value can be made to be inherited, if it does not inherit by default; or if it does inherit by default, have its inheritance strengthened. Notes and examples follow.

Examples:

background-repeat: repeat | repeat-x | repeat-y | no-repeat

The background-repeat property can take the values that follow the property listing. "repeat" is the default. Since there is no asterisk after the property "background", it does not inherit from its parent.

letter-spacing: * normal | length | inherit

The letter-spacing property takes the literal values of "normal" and "inherit", but also a length, such as 9px. The asterisk indicates that it inherits its value from its parent.

background: color || image || repeat || attachment || position | inherit

The "background" property is a shortcut for several properties, namely, "background-color", " background-image", " background-repeat", " background-attachment", and "background-position", for example:

#content {background: #FFF url(images/bgImage) no-repeat fixed 0 0;}

The single pipe before the "inherit" value means that you can alternatively use the "inherit" value instead of a property value.

Any unspecified property automatically inherits from its parent or takes a CSS-defined default. Again, that default is specified by the underlined value. See a CSS browser compatibility chart at Web Devout.

POSITIONING AND DISPLAY

DISPLAY

Notes: Currently most browsers only support some of these values. "compact" and "marker" were removed from the 2.1 specification.

"none" hides the element, so that it does not take up space, nor get iterated as generated content. Compare to visibility: hidden. "inline" is floating content without a line break. "block" creates a line break like a div element. "list-item" is like an item in an unordered list. "run-in" causes the element to appear as an inline element at the start of the block immediately following it. "inline-block" causes the element to generate a block element box that will be flowed with surrounding content as if it were a single inline box.

The following values probably have more use in the context of styling XML.

"table" is the outer container for all tables. It defines a rectangular block element that contains any number of row groups, rows, column groups, columns, and/or captions, all arranged in an irregular grid pattern. Any rendering objects other than these should be displayed outside the rectangular grid. Analogous to <table>.

"inline-table" is identical to a table element, except that it is treated as an inline replaced element in the context surrounding the "inline-table" element. "table-column-group" is a container for a number of table columns. This allows the designer to set presentation properties on a group of columns, for example by placing borders around a group of columns. Analogous to <colgroup>. "table-column" is a grouping of all cells in a particular vertical column. Analogous to <col>. "table-row-group" is a container for a number of table rows. This allows the designer to set presentation properties on a group of rows, for example by placing borders around a group of rows. Analogous to <tbody>. "table-header-group" is a special type of "table-row-group" that is always displayed at the top of the table, above all other rows and row-groups, but below any captions. Analogous to <thead>. "table-footer-group" is a special type of "table-row-group" that is always displayed at the bottom of the table, below all other rows and row-groups, but above any captions. Analogous to <tfoot>. "table-row" groups all cells in a particular horizontal row. Analogous to <tr>. "table-cell" is the rectangular object to be arranged in the table grid. Table cells are only allowed inside rows. Analogous to <td>. "table-caption" is a special type of table cell that appears as a row or column of its own in a table. Analogous to <caption>. "icon" is a CSS3-proposed value. The W3C says, "The element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element, visually formatted as an inline-block."

POSITION

static | absolute | relative | fixed | inherit

Notes: "fixed" is not supported in IE6.

TOP

length | percentage | auto | inherit

RIGHT

length | percentage | auto | inherit

BOTTOM

length | percentage | auto | inherit

LEFT

length | percentage | auto | inherit

Z-INDEX

integer | auto | inherit

OVERFLOW

visible | hidden | scroll | auto | inherit

OVERFLOW-X (CSS3)

(same as above for horizontal overflow)

OVERFLOW-Y (CSS3)

(same as above for vertical overflow)

OVERFLOW-STYLE (CSS3)

CLIP

shape | auto | inherit

Notes: Currently "rect" (rectangle) is the only shape.

VISIBILITY

visible | hidden | collapse | inherit

FLOAT

none | left | right | mid-column | inherit

Notes: mid-column is CSS3 proposed for columns.

CLEAR

none | left | right | both | inherit

FONT AND TEXT

FONT-STYLE *

normal | italic | oblique | inherit

FONT-VARIANT *

normal | small-caps | inherit

FONT-WEIGHT *

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

FONT-SIZE *

LINE-HEIGHT *

normal | length | percentage | number | inherit

FONT:-FAMILY *

FONT *

font-style || font-variant || font-weight || font-size/line-height || font-family || icon | window | status-bar | document | workspace | desktop | tooltip | message-box | dialog | button | caption | small-caption | push-button | hyperlink | radio-button | checkbox | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | field | inherit

Notes: There is a slash between font-size and line-height. If a font-family is comprised of more than one word, put it in quotes, e.g. p {font-family: "Trebuchet MS", Verdana;} Also, it is good to include a generic alternative in case the user does not have any of the fonts installed.

"caption" is used for captioned controls like buttons, drop-downs, etc. "icon" is used to label icons. "menu" is used in menus like dropdown menus and menu lists. "messagebox" is used in dialog boxes. "smallcaption" is used for labeling small controls. "statusbar" is used in window status bars, and so forth

FONT-SIZE-ADJUST * (CSS3)

ratio | none | inherit

Notes: There are problems with this property specification. It was removed in CSS2.1, and then restored in CSS3 with revisions.

FONT-STRETCH * (CSS3)

Notes: Removed from 2.1 spec, but may be reinstated in CSS3.

LETTER-SPACING *

normal | length | inherit

WORD-SPACING *

normal | length | inherit

TEXT-ALIGN *

Notes: Text-align can use a string for table elements only, to align on that string, for example, text-align: "." will align on a decimal point. This does not seem to have browser support. "start" and "end" are CSS3 proposed values. Default depends on UA and direction property.

TEXT-ALIGN-LAST * (CSS3)

Notes: This property describes how the last line of the inline content of a block is aligned when "text-align" is set to "justify".

TEXT-DECORATION *

TEXT-TRANSFORM *

none | capitalize | uppercase | lowercase | inherit

TEXT-INDENT *

length | percentage | hanging | inherit

Notes: Default = "0". "hanging" is CSS3 and not supported.

VERTICAL-ALIGN

WHITE-SPACE *

WHITE-SPACE-COLLAPSE * (CSS3)

preserve | collapse | preserve-breaks | discard | inherit

DIRECTION *

ltr | rtl | inherit

UNICODE-BIDI

normal | embed | bidi-override | inherit

TEXT-SHADOW (CSS3)

none | color | length

Notes: Support is minimal. Removed from 2.1 spec. An example might be {textshadow: -5px -5px purple, 10px 10px red;}.

TEXT-WRAP * (CSS3)

normal | unrestricted | none | suppress

WORD-WRAP * (CSS3)

normal | break-word

WRAP-OPTION * (CSS3)

wrap | no-wrap | soft-wrap | emergency

WORD-BREAK * (CSS3)

normal | keep-all | loose | break-strict | break-all

HYPHENATE * (CSS3)

none | auto

Notes: This replaces the proposed "word-break-inside" property, now withdrawn.

MIN-FONT-SIZE * (CSS3)

auto | font-size

MAX-FONT-SIZE * (CSS3)

auto | font-size

LINEFEED-TREATMENT * (CSS3)

ALL-SPACE-TREATMENT * (CSS3)

preserve | collapse

TEXT-OVERFLOW-MODE (CSS3)

clip | ellipsis | ellipsis-word

TEXT-OVERFLOW-ELLIPSIS (CSS3)

string | uri

Notes: Default value is "U+2026 (value of)".

TEXT-OVERFLOW (CSS3)

text-overflow-mode || text-overflow-ellipsis

KERNING-MODE * (CSS3)

none | pair || contextual

KERNING-PAIR-THRESHOLD * (CSS3)

auto | font-size

DIMENSIONS

WIDTH

length | percentage | auto | inherit

HEIGHT

length | percentage | auto | inherit

MIN-WIDTH

length | percentage | inherit

Notes: Default is UA dependant. Not supported in IE6.

MAX-WIDTH

length | percentage | none | inherit

Notes: Not supported in IE6.

MIN-HEIGHT

length | percentage | inherit

Notes: Default = "0". Not supported in IE6.

MAX-HEIGHT

length | percentage | none | inherit

Notes: Not supported in IE6.

COLOR AND BACKGROUND

COLOR *

color-rgb | color-hex | color-name | inherit

Notes: Default depends on UA, generally black. Examples: rgb(255,0,0) or rgb(100%,0%,0%) | #666 or #EFEFEF | red

BACKGROUND-COLOR

color-rgb | color-hex | color-name | transparent | inherit

Examples: rgb(255,0,0) or rgb(100%,0%,0%) | #666 or #EFEFEF | red

BACKGROUND-IMAGE

none | uri | inherit

BACKGROUND-REPEAT

repeat | repeat-x | repeat-y | no-repeat

BACKGROUND-ATTACHMENT

scroll | fixed | inherit

BACKGROUND-POSITION

percentage || percentage | length || length | top | center | bottom | left | right | inherit

Default is 0% 0%. With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area. With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.

top left and left top = '0% 0%'. top, top center, and center top = '50% 0%'. right top and top right = '100% 0%'. left, left center, and center left = '0% 50%' center and center center = as '50% 50%'. right, right center, and center right = '100% 50%' bottom left and left bottom = '0% 100%' bottom, bottom center, and center bottom = '50% 100%'. bottom right and right bottom = '100% 100%'

BACKGROUND-BREAK (CSS3)

bounding-box | each-box | continuous | inherit

OUTLINE

width || style || color | inherit

COLUMNS

COLUMN-WIDTH (CSS3)

length | auto

COLUMN-COUNT (CSS3)

integer | auto

COLUMN-GAP (CSS3)

length | normal

COLUMN-RULE-WIDTH (CSS3)

length | thin | medium | thick

COLUMN-RULE-STYLE (CSS3)

COLUMN-RULE-COLOR (CSS3)

color-rgb | color-hex | color-name | transparent

Examples: rgb(255,0,0) or rgb(100%,0%,0%) | #666 or #EFEFEF | red

GENERATED CONTENT

CONTENT

COUNTER-RESET

none | identifier || integer | inherit

COUNTER-INCREMENT

none | identifier || integer | inherit

QUOTES *

none | string || string | Outer quote open | outer quote closed | inherit | inner quote open | inner quote closed | single quote | double quote | single, left angle quote | single, right angle quote | double, left angle quote | double, right angle quote | left quote (single high-6) | right quote (single high-9) | left quote (double high-6) | right quote (double high-9) | double quote (double low-9), inherit

Notes: Default depends on UA. Can use character, description, or entity number.

Ex. Q:lang(en) {quotes: '"' '"' "'" "'";} Ex. Q:lang(no) {quotes: """ """ "<" ">";} Ex. Q::before {content: open-quote;} Ex. Q::after {content: close-quote;}

MARKER-OFFSET

length | auto | inherit

Notes: Used in conjunction with ::before and ::after pseudo-elements display property's "marker" value. Removed in CSS3.

MISCELLANEOUS

CURSOR *

url example: cursor: url(mycursor.cur); "hand" is IE proprietary. Use "pointer".

APPEARANCE (CSS3)

RESIZE (CSS3)

KEY-EQUIVALENT (CSS3)

none | key-press-combination | system-key-equivalent | list-item-marker | inherit

NAV-INDEX (CSS3)

auto | number | inherit

NAV-UP (CSS3)

auto | uri | target-name | root | inherit

NAV-RIGHT (CSS3)

auto | uri | target-name | root | inherit

NAV-DOWN (CSS3)

auto | uri | target-name | root | inherit

NAV-LEFT (CSS3)

auto | uri | target-name | root | inherit

ICON (CSS3)

auto | uri

PRINT

MARKS

none | crop | cross | inherit

Notes: No current support. Not in 2.1 spec.

ORPHANS *

0 | 2 | inherit

Notes: 0 = off; 2 = on.

PAGE *

auto | identifier

Notes: Not in 2.1 spec.

PAGE-BREAK-INSIDE *

auto | avoid | inherit

PAGE-BREAK-AFTER

PAGE-BREAK-BEFORE

SIZE

length || length | absolute | relative | landscape | portrait | auto

Notes: Not in 2.1 spec.

WIDOWS *

0 | 2 | inherit

Notes: 0 = off; 2 = on, and is default.

AURAL

AZIMUTH *

CUE (CSS3)

url | cue-before || cue-after | inherit

CUE-BEFORE (CSS3)

none | uri | inherit

CUE-AFTER (CSS3)

none | uri | inherit

ELEVATION * (CSS3)

PAUSE (CSS3)

time | percentage | inherit

PAUSE-BEFORE (CSS3)

time | percentage | inherit

PAUSE-AFTER (CSS3)

time | percentage | inherit

PITCH (CSS3)

PITCH-RANGE * (CSS3)

number | inherit

Notes: Default = "50".

PLAY-DURING (CSS3)

SPEAK * (CSS3)

none | normal | spell-out | inherit

SPEAK-HEADER * (CSS3)

once | always | inherit

SPEAK-NUMERAL * (CSS3)

digits | continuous | inherit

SPEAK-PUNCTUATION * (CSS3)

none | code | inherit

STRESS * (CSS3)

number | inherit

Notes: Default = "50".

VOICE-RATE * (CSS3)

VOICE-FAMILY *

specific-voice || specific-voice | generic-voice || generic-voice | inherit

VOICE-VOLUME * (CSS3)

Tranformation Functions

matrix(, , , , , ) specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1). matrix3d(, , , , , , , , , , , , , , , )

specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.

translate([, ]) specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If is not provided, ty has zero as a value. translate3d(, , )

specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. translateX()

specifies a translation by the given amount in the X direction. translateY()

specifies a translation by the given amount in the Y direction. translateZ()

specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. scale([, ])

specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. scale3d(, , )

specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. scaleX()

specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter. scaleY()

specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter. scaleZ()

specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. rotate()

specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. rotate3d(, , , )

specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. If the direction vector is not of unit length, it will be normalized. A direction vector that cannot be normalized, such as [0, 0, 0], will cause the rotation to not be applied. This function is equivalent to matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1). rotateX()

specifies a clockwise rotation by the given angle about the X axis. rotateY()

specifies a clockwise rotation by the given angle about the Y axis. rotateZ()

specifies a clockwise rotation by the given angle about the Z axis. skewX()

specifies a skew transformation along the X axis by the given angle. skewY()

specifies a skew transformation along the Y axis by the given angle. skew( [, ])

specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis). perspective()

specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position. The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer's position and a point at a distance of infinity from the viewer). The depth, given as the parameter to the function, represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000 gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.