This is a simple reference guide to the Cascading Style Sheet attributes.
Taken largely from XML: Extensible Markup Language, Elliotte Rusty Harold, IDG Books Worldwide.
Links in external style sheet (in <head>)
Define styles in <head>. Surround with <-- ... -->.
Used for inline formatting.
Places line breaks (no vertical space) around section.
Specifies style class. Defined with .style
Unique element id. Defined with #id
May also be used as a target <a href="#id">
Manually specify or override style for given element.
| Unit | Meaning |
| em | Width of "m" |
| ex | Width of "x" |
| px | Pixels |
| pt | Points |
| in | Inches |
| cm | Centimeters |
| mm | Millimeters |
| pc | Picas |
| Property | Values | Comments |
| font-family | name, serif, sans-serif, monospace, fantasy, cursive | Can specify preferences seperated by commas |
| font-style | normal, italic, oblique | |
| font-variant | normal, small-caps | |
| font-weight | normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900, lighter, bolder | |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length, percentage |
| Property | Values | Comments |
| color | colour name,#rrggbb | |
| background-color | transparent, colour name, #rrggbb | |
| background-image | none, URL | |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | |
| background-attachment | scroll, fixed | |
| background-position | top, center, bottom, length, percentage |
| Property | Values | Comments |
| text-align | left, right, center, justify | |
| text-indent | length, percentage | |
| word-spacing | normal, length | |
| letter-spacing | normal, length | |
| text-decoration | none, underline, line-through, overline, blink | |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage | |
| text-transform | capitalize, uppercase, lowercase, none |
| Property | Values | Comments |
| margin-top | length, percentage, auto | Space outside borders |
| margin-right | length, percentage, auto | |
| margin-bottom | length, percentage, auto | |
| margin-left | length, percentage, auto | |
| margin | length, percentage, auto | Specify all 4 margin spaces |
| padding-top | length, percentage | Spacing inside borders |
| padding-right | length, percentage | |
| padding-bottom | length, percentage | |
| padding-left | length, percentage | |
| padding | length, percentage | Specify all 4 internal spaces |
| border-width-top | length, thin, medium, thick | Width of border |
| border-width-right | length, thin, medium, thick | |
| border-width-bottom | length, thin, medium, thick | |
| border-width-left | length, thin, medium, thick | |
| border-width | length, thin, medium, thick | Specify all 4 border widths |
| border-color | colour, #rrggbb | |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | |
| width | length, percentage, auto | |
| height | length, percentage, auto | |
| float | left, right, none | |
| clear | left, right, none, both |
| Property | Values | Comments |
| display | block, inline, list-item, none | Line breaks before and after element? |
| white-space | normal, pre, nowraw | How is whitespace treated? |
| list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none | List bullet style |
| list-style-image | URL | Image for list bullet |
| list-style-position | inside, outside | Position of bullet relative to list items and wrapping |