Cascading Style Sheets

Properties

• font properties:
  • color (RGB hex triplet or named color)
  • font-family
    - generic font families: serif, sans-serif, cursive, monospace, fantasy
  • font-style (normal |italic)
  • font-weight (normal | bold | bolder | lighter | 100-900)
  • font-size
    • units can be: pt, in, cm, px
    • larger, smaller
    • xx-small, x-small, small, medium, large, x-large, xx-large
    • percentage relative to parent font size
  • font-variant (normal | small caps)
  • font: [font-style || font-variant || font-weight]? font-size [line-height]? font-family
• text properties:
  • text-align (left | center | right | justify)
  • line-height (pt, in, cm, px, %, normal, scaling factor)
  • text-decoration (none | underline | line-through | overline | blink)
  • text-shadow (pt, in, cm, px) [blur radius, shadow color optional]
  • text-transform (capitalize | uppercase | lowercase | none)
  • letter-spacing (normal, pt, in, cm, px)
  • word-spacing (normal, pt, in, cm, px)
  • text-indent (pt, in, cm, px, %)
  • white-space (pre | nowrap | normal)
  • vertical-align (baseline | sub | super | bottom | text-bottom | middle | top | text-top | %)
• background properties:
  • background-attachment (fixed, scroll)
  • background-color (transparent, RGB triplet, named color)
  • background-image (none, URL)
  • background-repeat (repeat | repeat-x | repeat-y | no-repeat)
  • background-position (% | length{1,2} | [top|center|bottom] | [left|center|right]
  • background: background-color || background-image || background-repeat || background-attachment || background-position
• border/padding/margin properties:
  • border-width (thin, medium, thick, pt, cm, in, px)
    • P {border-width:1pt 2pt 3pt 4pt;}
    • P {border-width:40pt;}
  • border-bottom-width (thin, medium, thick, pt, cm, in, px)
  • border-top-width (thin, medium, thick, pt, cm, in, px)
  • border-left-width (thin, medium, thick, pt, cm, in, px)
  • border-right-width (thin, medium, thick, pt, cm, in, px)
  • border-color (RGB triplet, named color) {1,4}
  • border-bottom-color (RGB triplet, named color)
  • border-top-color (RGB triplet, named color)
  • border-left-color (RGB triplet, named color)
  • border-right-color (RGB triplet, named color)
  • border-style (none | solid | double | groove | ridge | inset | outset) {1,4}
  • border-bottom-style (none | solid | double | groove | ridge | inset | outset)
  • border-top-style (none | solid | double | groove | ridge | inset | outset)
  • border-left-style (none | solid | double | groove | ridge | inset | outset)
  • border-right-style (none | solid | double | groove | ridge | inset | outset)
  • border: border-width || border-style || border-color
  • border-bottom: border-width || border-style || border-color
  • border-top: border-width || border-style || border-color
  • border-left: border-width || border-style || border-color
  • border-right: border-width || border-style || border-color
  • padding (pt, in, cm, px, %) {1,4}
    • p {padding:10pt 20pt 30pt 40pt;}
    • p {padding:40pt;}
  • padding-bottom (pt, in, cm, px, %)
  • padding-top (pt, in, cm, px, %)
  • padding-right (pt, in, cm, px, %)
  • padding-left (pt, in, cm, px, %)
  • margin (auto, pt, in, cm, px, %) {1,4}
    • p {margin:10pt 20pt 30pt 40pt;}
    • p {margin:40pt;}
  • margin-left (auto, pt, in, cm, px, %)
  • margin-right (auto, pt, in, cm, px, %)
  • margin-top (auto, pt, in, cm, px, %)
  • margin-bottom (auto, pt, in, cm, px, %)
• list properties:
  • list-style-type (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none)
  • list-style-image URL | none
  • list-style-position inside | outside
  • list-style: list-style-type || list-style-position || list-style-image
• other properties:
  • float (left | right | none)
  • clear (none | left | right | both)
  • display (block | inline | list-item | none)
  • height (length | auto)
  • width (length | % | auto)
  • top (length | % | auto)
  • left (length | % | auto)
  • position (absolute | relative | static | fixed | inherit)
  • visibility (visible | hidden | collapse | inherit)
  • z-index (auto | integer)
  • overflow (visible | hidden | scroll | auto | inherit)
  • clip rect(top, right, bottom, left) | auto | inherit)
  • overflow-clip rect(top, right, bottom, left) | auto | inherit)
  • min-height length | pct | inherit
  • min-width length | pct | inherit
  • max-height length | pct | none | inherit
  • max-width length | pct | none | inherit

Previous: CSS Getting Started

Next: CSS Selectors