Cascading StyleSheet Information, pg. 3

Inline Model Properties

These properties can only be used on text or, rather, layers and elements that contain text. The "inherit" property tells the element to inherit the declaration from the closest ancestor with a set value. All of the font- properties and list-style- properties, color, text-align, text-indent, text-transform, line-height, letter-spacing, and word-spacing are inherited by all descendant elements unless you tell them not to.

Longhand Properties
  • color: sets the foreground color of anything that accepts the property, usually text color. This is also applicable for horizontal rules (<hr />); possible values are color words, hexadecimal digits, and RBG values.
  • font-family: sets how the text will display. You can use any font as a value, but the user may not have the font installed on their computer. Multiple values are separated by commas and it's advisable to use a generic "fallback" font (serif, sans-serif, monospace, cursive, fantasy).
  • font-size: sets the font size; possible values are "xx-smal," "x-small," "small," "medium," "large," "x-large," "xx-large," "larger," "smaller," a numerical length (usually px or pt), a percentage, or "inherit." The default size depends on the browser.
  • font-stretch: makes the text wider or narrower than the default; possible values are "normal" (default), "wider," "narrower," "ultra-condensed," "extra-condensed," "condensed," "semi-condensed," "semi-expanded," "expanded," "extra-expanded," "ultra-expanded," or "inherit"
  • font-style: sets the variant of the font face (if available); possible values are "normal" (default) "italic," "oblique," and "inherit"
  • font-variant: sets the letter variation; possible values are "normal" (default), "small-caps," or "inherit"
  • font-weight: sets the thickness of the text; possible values are "normal" (default), "bold," "bolder," "lighter," "100," "200," "300," "400" (default), "500," "600," "700," "800," "900," or "inherit"
  • text-align: sets the alignment of the text; possible values are "left" (default), "right," "center," "justify," and "inherit"
  • text-decoration: sets the decoration of text; possible values are "none" (default), "underline," "overline," "line-through," "blink," and "inherit." This is usually used only for links.
  • text-indent: sets the indentation of the first line in a block level element (<div>, <p>, etc.); possible values are a numerical length, a percentage, and "inherit"
  • text-shadow: adds a shadow or a glow (if done a certain way) to text; possible values are "none" (default), a numerical length (x, y, blur radius), a color (word, RGB, Hexadecimal), and "inherit"
    • Example: .shadow {3px 3px 5px black}
  • text-transform: sets the special capitalization of text; possible values are "capitalize," "uppercase," "lowercase," "none" (default), and "inherit"
  • line-height: sets the height of the inline box; possible values are "normal," a numerical value, a numerical length, a percentage, or "inherit"
  • vertical-align: sets the alignment of text within the inline box or a table cell; possible value "baseline" (default), "sub," "super," "top," "text-top," "middle," "bottom," "text-bottom," a percentage, a numerical length, or "inherit"
  • letter-spacing: sets the amount of space between letters; possible values are numeric, percentage, or "inherit"
  • word-spacing: sets the amount of space between words; possible values are numeric, percentage, or "inherit"
  • list-style-image: changes the image to use as the list marker; possible values are "url()" and "inherit." List-style-type should be set to "none" to use this property.
  • list-style-position: sets the placement of the list marker; possible values are "inside," "outisde," and "inherit"
  • list-style-type: sets the list marker style; the most common values are: "disc," "circle," "square," "decimal," "upper-roman," "lower-roman," "upper-alpha," "lower-alpha," "none," and "inherit"
Shorthand Properties

You can use these in place of individual settings. They should be used in the order listed and properties can be left out if not needed.
  • font: font-style, font-variant, font-weight, font-size, line-height, font-family
    • Example: span {font:bold 9pt Arial,sans-serif;}
  • list-style: list-style-type, list-style-position, list-style-image
    • Example: li {list-style:none url(bullet.gif);}
Psuedo-Classes

The link psuedo-classes should be used in this order: :link, :visited, :hover, :active. A mnemonic device to help you remember the order (from The Zen of CSS Design) is Lord Vader's Handle's Anakin.
  • :active: used to style a hyperlink when its being clicked but the button hasn't been released yet. A link can also be considered active if it has a keyboard shortcut assigned to it and you've pressed the key.
  • :hover: used to style a element when the mouse is over it. You are supposed to be able to use :hover on just about any tag, but Internet Explorer will ignore it unless it's on an anchor tag (<a>).
  • :link: used to style a hyperlink
    • Example: a:link {color:white; text-decoration:underline;}
  • :visited: used to style a visited hyperlink