CSS Properties
Introduction
This is a summary of the properties and values of the most frequently used CSS style rules. The majority of them is self-explanatory.
| Property | Values | Notes |
|---|---|---|
| background-attachment | scroll, fixed | Replaces HTML's bgproperties. |
| background-color | color name, #hexcolor | |
| background-image | URL("picture.jpg") | |
| background-position | top, right, bottom, left, center | |
| background-repeat | repeat, no-repeat, repeat-x, repeat-y |
| Property | Values | Notes |
|---|---|---|
| border | width border-style color | A triplet of values. |
| border-collapse | separate, collapse | Collapses cell and table borders in one line. |
| border-color | color name, #hexcolor | |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | |
| border-width | thin, medium, thick, em, pt, px | |
| border-* | width border-style color | A triplet of values. *means one of: top, right, bottom, left. |
| border-*-^ | value is determined by the choice of ^. | * means one of: top, right, bottom, left. ^means one of: color, style, width. |
| Property | Values | Notes |
|---|---|---|
| bottom | normal, pt, %, em, px | Absolute position of a block from bottom in the parent element. |
| caption-side | top, bottom | Table caption position. |
| clear | left, right, both, none | |
| clip | auto, rect(left, top, right, bottom) | For blocks with absolute position; the braced values determine the clip rectangle. |
| color | color name, #hexcolor | |
| cursor | default, crosshair, hand, move, pointer, text, weit, help, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, progress, not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize, url(uri) | Cursor shape for the region. Result may depend on the browser and system settings. |
| display | inline, block, list-item, none | |
| float | left, right | Picture-text alignment. |
| Property | Values | Notes |
|---|---|---|
| font | style, variant, weight, size/line-height, family | Ordered quintuple of values. |
| font-family | arial, courier, cursive, fantasy, helvetica, impact, monospace, sans-serif, times new roman, verdana etc. | Several font family names can be listed. System selects the first available in the list. Put multiple word names in quotes. |
| font-size | pt, keyword, %, em, px | Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. |
| font-style | normal, italic, oblique | |
| font-variant | normal, small-caps | |
| font-weight | bold, bolder, lighter, normal | Bolder is the same as the b element. |
| Property | Values | Notes |
|---|---|---|
| height | normal, pt, %, em, px, auto | Height of the block. |
| left | normal, pt, %, em, px | Absolute position of a block from left in the parent element. |
| letter-spacing | normal, pt, %, em, px | |
| line-height | normal, pt, %, em, px |
| Property | Values | Notes |
|---|---|---|
| list-style | type, position, image | An ordered triplet of values. |
| list-style-type | disc, circle, square, decimal, lower-roman, lower-alpha, upper-alpha, none | Bullet shapes. |
| list-style-image | none, URL("bullet.jpg") | Image instead of a bullet. |
| list-style-position | outside, inside | Bullet is outside or inside the block. |
| Property | Values | Notes |
|---|---|---|
| margin | top right bottom left | An ordered quadruple of values. |
| margin-* | pt, %, em, px, auto | * means one of top, right, bottom, left. |
| overflow | none, hidden, scroll, auto | Wrapping of text in a frame and scrollbar presence. |
| padding | top right bottom left | An ordered quadruple of values. |
| padding-* | pt, %, em, px, auto | * means one of top, right, bottom, left. |
| position | absolute, relative | Position of a block in the parent element. |
| right | normal, pt, %, em, px | Absolute position of a block from the right in the parent element. |
| table-layout | auto, fixed | Tables with auto layout adjust to the window size. |
| Property | Values | Notes |
|---|---|---|
| text-align | left, right, center, justify | |
| text-decoration | none, underline, overline, line-through, blink | |
| text-indent | normal, pt, %, em, px | |
| text-transform | none, capitalize, uppercase, lowercase |
| Property | Values | Notes |
|---|---|---|
| top | normal, pt, %, em, px, auto | Absolute position of a block from top in the parent element. |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, % | Determines the vertical alignment of an element. |
| white-space | normal, pre, nowrap | pre value provides analog to pre tag. |
| width | normal, pt, %, em, px, auto | |
| word-spacing | normal, pt, %, em, px | |
| z-index | number | Sets the stack order of an element. |
References
W3Schools Online Web Tutorials.
W3Schools
,
2006
C. D. Knukles and D. S. Yuen:
Web Applications, Concepts & Real World Designs.
Wiley,
2005
Cascading style sheets, level 1 recommendations by WWW Consortium.
World Wide Web Consortium
,
1996
Cascading style sheets, level 2 recommendations by WWW Consortium.
World Wide Web Consortium
,
1998
Syntax of CSS rules in HTML's style attribute.
World Wide Web Consortium
,
2002
W3C CSS Validation Service.
World Wide Web Consortium
,
2004