CSS Properties
Posted on 2007-Sep-7 at 05:00 in Web programming
Properties and values
| Text properties | |||
| Properties | Values | Examples/Notes | CSS level |
| font-family | family-name or generic-family | arial, sans-serif | CSS1 |
| font-size | (pt), (px), (percent) | pt is Point, i.e. 12pt px is Pixel, i.e. 10px |
CSS1 |
| font-size-adjust | (number), none, inherit | CSS2 | |
| font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit |
CSS2 | |
| font-style | normal, italic, oblique | CSS1 | |
| font-variant | normal, small-caps | CSS1 | |
| font-weight | normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller |
Number can be 100, 200, 300, 400, 500, 600, 700, 800, or 900 |
CSS1 |
| font | Any of the above values separated by spaces. |
{font: arial 12pt oblique bold} | CSS1 |
| letter-spacing | normal, 1em | 1em, 2em, and so on | CSS1 |
| text-align | left, right, center, justify | CSS1 | |
| text-decoration | none, underline, overline, line-through, blink |
CSS1 | |
| text-shadow | none, color length length length, inherit | CSS2 | |
| text-transform | none, capitalize, uppercase, lowercase | CSS1 | |
| text-indent | (length), (percent) | Length in pixels | CSS1 |
| word-spacing | normal, 1em | 1em, 2em, and so on | CSS1 |
| Color & Background properties | |||
| Properties | Values | Examples/Notes | CSS level |
| background-attachment | scroll, fixed | CSS1 | |
| background-color | (color), transparent | Color in hex code | CSS1 |
| background-image | none, (location) | CSS1 | |
| background-position | (percent), (length), top, center, bottom, left, center, right |
CSS1 | |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | CSS1 | |
| background | Any of the above background values separated by spaces |
{background: URL(back.gif) repeat fixed} | CSS1 |
| color | (color) | Color is in hex code. This refers to the foreground color. |
CSS1 |
| Box properties | |||
| Properties | Values | Examples/Notes | CSS level |
| margin-bottom | (length), (percent), auto | Length in pixels | CSS1 |
| margin-left | (length), (percent), auto | Length in pixels | CSS1 |
| margin-right | (length), (percent), auto | Length in pixels | CSS1 |
| margin-top | (length), (percent), auto | Length in pixels | CSS1 |
| margin | Any of the above margin values in top, right, bottom, left order separated by spaces |
{margin: 5px 2px 5px 3px} When only one value is present, all margins are affected. |
CSS1 |
| padding-bottom | (length), (percent) | Length in pixels | CSS1 |
| padding-left | (length), (percent) | Length in pixels | CSS1 |
| padding-right | (length), (percent) | Length in pixels | CSS1 |
| padding-top | (length), (percent) | Length in pixels | CSS1 |
| padding | Any of the above padding values in top, right, bottom, left order separated by spaces |
{padding: 5em 6em 3em 6em} When only one value is present, all sides are affected. |
CSS1 |
| border-bottom-width | medium, thin, thick, (length) | Length in pixels | CSS1 |
| border-bottom | Any of the border-top-bottom, border-color and border-style values |
{border-bottom: thin inset blue} | CSS1 |
| border-color | (color) | Color is in hex code. | CSS1 |
| border-left-width | medium, thin, thick, (length) | Length in pixels | CSS1 |
| border-left | Any of the border-top-left, border-color and border-style values |
{border-left: thick inset green} | CSS1 |
| border-right-width | medium, thin, thick, (length) | Length in pixels | CSS1 |
| border-right | Any of the border-right-width, border-color and border-style values. |
{border-right: thin inset blue} | CSS1 |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset |
CSS1 | |
| border-top-width | medium, thin, thick, (length) | Length in pixels | CSS1 |
| border-top | Any of the border-top-width, border-color and border-style values |
{border-top: thin inset red} | CSS1 |
| border | Any of the border values. Applies to all borders |
{border: medium blue} | CSS1 |
| height | auto, (length), (percent) | Length in pixels | CSS1 |
| width | auto, (length), (percent) | Length in pixels | CSS1 |
| Classification | |||
| Properties | Values | Examples/Notes | CSS level |
| list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, none |
CSS2 | |
| list-style-image | none, (url) | CSS1 | |
| list-style-position | outside, inside | CSS1 | |
| list-style | Any of the above list-style values separated by spaces |
{list-style: disc inside} | CSS1 |
| white-space | normal, pre, nowrap | CSS1 | |
| Visual effects | |||
| Properties | Values | Examples/Notes | CSS level |
| clip | auto, (shape) | "rect(top,right,bottom,left)". | CSS2 |
| cursor | auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help |
CSS1 | |
| outline-width | medium, thin, thick, (length), inherit | CSS2 | |
| outline-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset |
CSS2 | |
| outline-color | (color), invert, inherit | CSS2 | |
| outline | Any of the above outline values separated by spaces |
{outline: dotted thick} | CSS2 |
| overflow | visible, hidden, scroll, auto | CSS2 | |
| visibility | inherit, visible, hidden | CSS2 | |
| Generated content, automatic numbering and lists | |||
| Properties | Values | Examples/Notes | CSS level |
| content | (string), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit |
Used with the :before, :after pseudo-elements. |
CSS2 |
| counter-reset | (identifier) (integer), none , inherit | Used with the counter() and counters() functions of the content property. |
CSS2 |
| counter-increment | (identifier) (integer), none , inherit | Used with the counter() and counters() functions of the content property. |
CSS2 |
| marker-offset | (length), auto, inherit | CSS2 | |
| quotes | (string)(string) or more, inherit | CSS2 | |
| Visual formatting | |||
| Properties | Values | Examples/Notes | CSS level |
| bottom | auto, inherit, (length), (percent) | Length in pixels | CSS2 |
| clear | none, left, right, both, inherit | CSS1 | |
| direction | ltr, rtl, inherit | ltr - Left-to-Right rtl - Right-to-Left |
CSS2 |
| display | inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit |
CSS2 | |
| float | none, left, right, inherit | CSS1 | |
| height | auto, inherit, (length), (percent) | Length in pixels | CSS2 |
| line-height | normal, (length), (percent) | Length in pixels | CSS1 |
| left | auto, inherit, (length), (percent) | Length in pixels | CSS2 |
| max-height | none, inherit, (length), (percent) | Length in pixels | CSS2 |
| max-width | none, inherit, (length), (percent) | Length in pixels | CSS2 |
| min-height | inherit, (length), (percent) | Length in pixels | CSS2 |
| min-width | inherit, (length), (percent) | Length in pixels | CSS2 |
| position | static, absolute, relative, fixed, inherit |
CSS2 | |
| right | auto, inherit, (length), (percent) | Length in pixels | CSS2 |
| top | auto, inherit, (length), (percent) | Length in pixels | CSS2 |
| unicode-bidi | normal, embed, bidi-override, inherit | Length in pixels | CSS2 |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent) |
CSS1 | |
| width | auto, (length), (percent) | Length in pixels | CSS2 |
| z-index | auto, inherit, (integer) | CSS2 | |
| Tables | |||
| Properties | Values | Examples/Notes | CSS level |
| border-collapse | collapse, separate, inherit | CSS2 | |
| border-spacing | (length)(length), inherit | CSS2 | |
| caption-side | top, bottom, left, right, inherit | CSS2 | |
| empty-cells | show, hide, inherit | CSS2 | |
| speak-header | once, always, inherit | CSS2 | |
| table-layout | auto, fixed, inherit | CSS2 | |
link
