Mostly from http://www.westciv.com/style_master/academy/css_tutorial/

@import url(http://…) or “http://…”

Selectors

Specificity (precedence) of selectors:

1. ID selectors are more specific than other selectors
2. Class selectors are more specific than HTML element selectors, and other selectors such as contextual, pseudo class and pseudo element selectors.
3. Contextual selectors, and other selectors involving more than one HTML element selector are more specific than a single element selector (and for two multiple element selectors, the one with more elements is more specific than the one with fewer.)

Later selector overrides earlier ones if they have the same specificity.

Most selectors are listed here. Selectors can be grouped like “s1, s2, … {}”.

• Type: element name. “element” selects <frame>
• Class: class attribute. “element.class{}” selects <element class=”class”>. “.class{}” selects all elements with that class.
• ID: selects only one element with the ID. Similar to class, we can do “element#ID{}” or “#ID{}”.
• Descendent: a list of selectors from outside to inside. “s1 s2” selects s2 within s1.
• Child: s1>s2 selects s2 only when it’s a directly contained (1st generation child) in s1. “selector:first-child” only selects first child.
• Dynamic pseudo class: “selector:[hover/active/focus]{}”.
• Attribute: “element[attribute=”value”]{}” selects <element attribute=”value”>. Different forms: [attr] if attr is set; [attr~=”value”]; [attr|=”value”] if value is in a list of hyphen separated values.
• Pseudo element: “selector:[first-line/first-letter/before/after]“. Use content property to specify generated content for before/after.
• Adjacent: “s1+s2{}” selects s2 only when it’s right besides s1

Properties

Most are inherited by children from parents, except a few obvious ones like margin, padding, position, etc. / means alternatives, comma separates types of alternatives.

• Text
  • color
  • font-weight: normal/bold, bolder/lighter (than parent), 100:100:900. Children have the same absolute weight as parent.
  • font-family: serif/sans-serif/cursive/fantasy/monospace, and specific font name
  • font-size: specific length in many units, small/medium/large, larger/smaller,
  • font-variant: normal/small-caps
  • font-style: normal/italic/oblique
  • text-decoration: none/underline/overline/line-through/blink
  • text-transform: none/capitalize/uppercase/lowercase
• Text layout
  • letter-spacing, word-spacing: normal, specific length in many units
  • line-height: normal, multiple/percentage (of font size), length
  • vertical-align: baseline/middle/sub/super/text-top/text-bottom (relative to parent), top/bottom (relative to element line), percentage (of line-height)
  • text-indent: indent (or outdent if negative) of the first line. length, percentage (of parent width)
  • text-align: left/right/center/justify
  • direction: direction of text flow. ltr/rtl
  • unicode-bidi: direction of unicode text.
• Background
  • background-color
  • background-image
  • background-attachment: whether background moves with foreground. scroll/fixed
  • background-repeat: repeat/repat-x/repeat-y/no-repeat
  • background-position: top/left/center/right/bottom, percentages, lengths, and combinations
  • background: combination of all the above
• Border
  • border-[/top/left/bottom/right]-width: thin/medium/thick, length
  • border-color: can have 1-4 values. 1: all edges. 2: t/b, l/r. 3: t, l/r, b. 4: t, l, b, r
  • border-style: 1-4 values among none/dotted/dashed/solid/double/groove/ridge/inset/outset
  • border[-top/left/bottom/right]: specify the above for specific border together
• Margin: margin[-top/left/bottom/right] percentage (of container), length, or auto (set left and right to auto to place it center)
• Padding: padding[-top/left/bottom/right] percentage (of container), length
• Page layout
  • position: layout type. static/relative (from static)/absolute (from parent)/fixed (w.r.t window)
  • top, left, bottom, right: length, percentage, or auto
  • width, height, [min/max-][width/height]: length, percentage, auto
  • z-index: integer, auto
  • visibility: visible/hidden/inherit
  • overflow: when element is smaller than its content. visible/hidden/scroll/auto
  • float, clear: none/left/right/both (only for clear)
  • clip: rect(t l b r), auto
• Element type: control how elements are displayed
• User interface
  • cursor: auto/crosshair/default/pointer/move/*-resize/text(I-bar)/wait/help
  • outline: when the element has focus. outline-[style/width/color] are the same as border.