CSS: CSS Typography: The Basics

http://sixrevisions.com/css/css-typography-01/#more-5027
http://sixrevisions.com/css/css-typography-02/#more-5033


FONT:
font-sytle: oblique;
font-weight: bold;

TEXT:
text-indent: 50px; (indents the first line of a text block.)
letter-spacing: 2px;

OTHER:
Color: red; (controls an HTML element’s foreground color)
---------------------------------------------------------------
FONT SIZING:

Absolute-size:
xx-small, x-small, small, medium, large, x-large, xx-large.

Relative-size:
div {
  font-size: 12pt;
}
p {
  font-size: large;
}
As an example, if text is set to 12pt, the 'large' keyword will resize the child element’s text to about 12pt x 1.2 (depending on the browser), which would equal 14.4pt.

Absolute Lengths:
pt, px, mm, cm, in, and pc.

Millimeters (mm), centimeters (cm), and inches (in) are more suitable in print design. They are not very suitable for screen-based measurements because of the high variance of screen resolutions.

 If developing for an audience that will likely resize text manually through their web browser, the px unit of measurement may not be a good option.

Relative Lengths:
This means that their sizes are dependent on the font-size assigned to their parent element. Possible units are em, % and ex.

em and % values are far easier to work with. em and % act identically, and it’s just a matter of syntax:

0.5em is equal to 50%
1em is equal to 100%
0.2em is equal to 20%
0.73em is equal to 73%
2.21em is equal to 221%

html, body {
  font-size: 85%; /* = (.85em) */
}

h1 {
  font-size: 110%; /* = (1.1em) */
}
-----------------------------------

FONT STACKS:

So when developing font stacks:

Make sure you account for the different operating systems (Windows, Mac, and Linux).
Make sure a font stack is all sans serif or is all serif (for consistency)
Make sure the fonts in the stack have similar aspect ratios.
http://www.awayback.com/revised-font-stack/
-----------------------------------
CSS Typography Pseudo-classes and Pseudo-elements:


a:link { color: #666666; text-decoration: none; }
a:visited { color: #333333; }
a:hover { text-decoration: underline; }
a:active { color: #000000; }
----
First, Last, and n-th Pseudo-elements:

(Creating drop caps)
p:first-letter {
  font-size: 30pt;
  display: block;
  float: left;
  margin: 0 5px 5px 0;
}

(:first-line)
p:first-line {
  font-weight: bold;
  text-transform: uppercase;
}

( :nth-child() )
p:nth-child(2) {
  background: #e7f0ce;
  padding: 10px;
}

Also play around with :nth-child(even) and :nth-child(odd) pseudo-classes to grab even and odd elements.