Font-family

The font family keyword changes the font of the text it contains. However, it only changes it if the font is on the current user's computer. There's no real way to know which fonts are on a user's computer, but if you absolutely don't want the default font unless it's absolutely necessasry, you can list multiple different fonts and it'll use the first one it can. Just separate the fonts with a comma, like this:

p {font-family:"times new roman",helvetica,impact,sans-serif}

This first checks to see if a font named times new roman is on the computer, then checks for helvetica, impact, and lastly sans-serif. Sans-serif is a default font that most, if not all computers should have. And of course, if it doesn't find any of the fonts listed, it'll make the text look like this. A few notes. Multiple word fonts need quotes around them, and if you're declaring them inline use single quotes (style="font-family:'times new roman',helvetica"). Lastly, put the font-family keyword at the end of the declaration, right before the closing bracket.

Font-size

This changes the size of the text. There are tons of different values you can feed this keyword, but I'm just going to go over the more signifigant ones. You can give them word values: xx-small, x-small, small, medium, large, x-large, xx-large, larger, and smaller. Xx-small to xx-large equal the 1-7 values of the HTML tag. Larger and smaller make the text one bigger or smaller than the tag that contains it. You can also use percentage values, which work the same way as larger and smaller - they make the text x percent of the size of the text around it. You can also give measurements: in, px, cm, and mm. Inches, pixels, centimeters, and millimeters. This is a nice and easy tag, so I don't think an example is necessary.

Font-style

This makes the text italic, and it takes three values: italic, oblique, and normal. Both italic and oblique do the same thing, but certain font's "italic" type is actually named "oblique." Obviously, normal turns the text to it's normal unitalicized font. Test to see which one works with your font before releasing it for the world to see.

Font-weight

This makes the font bold, and it takes the values bold and normal. Bold makes the text bold, and normal makes it normal. It also takes number values of 100 to 900, where 400 is normal text, 100 is "thinner" and 900 is "thicker". This might not work with all fonts though - test it before using it. Finally, it takes the values lighter or bolder, which makes the text lighter or bolder than the text around it. This also might not work if the font doesn't support it.

Font-variant

This makes the text display in small caps, and it takes the value small-caps. It looks like this: This text is in Small Caps!

Text-transform

This does four different things to text. It makes it all uppercase with the value uppercase, all lowercase with the value lowercase, and it capitalizes each new word with the value capitalize. None cancels out any inherited text-transform attributes.

Text-decoration

This decorates the text. A value of underline underlines the text, overline puts a line over the text, line-through puts a line through the text, blink makes the text blink *shudder* (Probably doesn't work - most browsers don't seem to support it), and none cancels out any inherited values of it.

a:link, a:hover, a:visited, and a:active

These aren't keywords, but things that allow you to mess with links. They are used where you'd normally place the tag name. Just use 'em like this:

a.test:link {text-decoration:none; background-color:orange;
             font-variant:small-caps; font-size:smaller}
a.test:hover {background-color:#1a1;font-size:larger;color:green}
a.test:visited {color:#555;text-decoration:line-through}
a.text:active {font-size:xx-large}

It wraps here, but it shouldn't in your code! When applied, they look like this: This is a link! The a:link one modifies a normal, unvisited link. a:hover is what a link looks like while the mouse is over it. a:visited is what a link to a sight you've been to before looks like, and a:active is what the link looks like after you've clicked it but before the next page has loaded.

and that's just about all there is to know about modifying the fonts on your web pages!