1. Font-family
2. Font-style
3. Font-variant
4. Font-weight
5. Font-size

Font-family

There are several font families, and you have to be careful when choosing them. In fact maybe the reader's browser can't recognize a particular family. So you can specify more than one family at the same time, and in addition, you should use a generic font family as a last alternative. Generic families are:

1. 'serif (e.g. Times)
2. 'sans-serif' (e.g. Helvetica)
3. 'cursive' (e.g. Zapf-Chancery)
4. 'fantasy' (e.g. Western)
5. 'monospace' (e.g. Courier)

Values of 'Font-family' property, are separated by a comma, and the last one is the generic family. Look at the following example:

body { font-family : gill, helvetica, sans-serif }

Gill is a family, helvetica is another alternative family, and finally sans-serif is the generic family. Remember: you should always use a generic family. When your font family has a name like: 'new century schoolbook', you have to put it within quotes, ("new century schoolbook") because otherwise, the browser will do an incorrect assumption.

Font-style

Font-style maybe: 'normal' (i.e. the default value) or 'italic'. Example:

h1 { font-family : helvetica, sans-serif; font-style : italic }

Font-variant

Font-variant maybe: 'normal' or 'small-caps'. Small-caps means that lower case letter will look similar to uppercase ones, but in a smaller size. Example:

h1 { font-family : helvetica, sans-serif; font-style : italic; font-variant : small-caps }

Font-weight

Font-weight maybe: 'normal', 'bold', 'bolder' or lighter. You can also use a numeric value: 100, 200, 300, 400, 500, 600, 700, 800, 900. These values form an ordered sequence and each number means a weight. '400' and 'normal' are the same thing. '700' and 'bold' are the same thing too. Example:

H1 { font-weight : normal } (you could also write: H1 { font-weight : 400 })

Font-size

You can specify an 'absolute size', a 'relative size' a length or a percentage. An absolute size is a value referred to a table of font sizes kept by your client. A relative size is a parameter referred to the font size of the parent element. It maybe 'larger' or 'smaller'. Length is the actual length of the font. Percentage is a percentage referred to the font size of the parent element. Examples:

p { font-size : 12pt }
p { font-size : larger }
p { font-size : 1.5em }
p { font-size : 150% }

Warning: pt means point, and it is an absolute size, however you can also use: 'in' that means inches, 'cm' that means centimeters, 'mm' that means millimeters and 'pc' that means picas.