You can use three types of values to size fonts. They are absolute (for example, pixels or inches), relative (for example, percentages or ems), and what I call the sweatshirt keywords (for example, x-small, small, large, and xx-large, among others). All three methods have advantages and disadvantages. The least problematic of the three is the keywords. I personally prefer styling font sizes in ems.

First, modify the body selector to look like this:

<style type="text/css"

body {font-family: verdana, arial, sans-serif; fint-size:1em}

</style>

Although this doesn't produce a visible effect, you now have a tweakable baseline size.

Next, here is what you write

<style type="text/css">

body {font-family: verdana, arial, sans-serif; font-size:1em

h3 {font-size:.8em}

</style>

Let's now go on and set the font sizes for other elements in your markup, as follows

<style type="text/css">

body {font-family: verdana, arial, sans-serif; font-size:100%;}

h3 {font-size:.8em}

p {font-size:.8em}

ol {font-size:.75em}

ul {font-size:.75em}

</style>

Font Properties

Font-Style

h2 {font-style:italic;}

other values: normal, oblique

Font style determines whether a font is italicized or not. It's that simple. If you want a piece of text to be italicized, you write this

p {font-style:italic;}

You can also write oblique instead of italic, but the result is the same.

Font-Weight Property

a {font-weight:bold}

Possible values: 100, 200, and so on to 900, or lighter, normal, bold, and bolder.

Font-Variant Property

Example: blockquote {font-variant:small-caps}

Values: small-caps, normal

Thsi property accepts just one value (besides normal), and that is small-caps. This causes all lowercase letters to be set in small caps, like this

h3 {font-variant:small-caps;}

Text Properties

If you want to indent a paragraph, create a superscript such as 6 in 10, creaate more space between each letter of a headline, and many other type formatting tasks, you need to use CSS text properties.

There are eight text-related CSS properties:

text-indent, letter-spacing, word-spacing, text-decoration, text-align, line-height, text-transform, vertical-align

1) Text Indent Property

Example: p {text-indent:-1.5em; margin-left:2em; border:1px solid red;}

2) Letter Spacing Property

Example: p {letter-spacing:.2em;}

Values: any length values (positive or negative)

3-Word-Spacing Property

Example p {word-spacing: .2em;}

Word spacing is very similar to letter spacing except, as you might imagine, the space changes between each word rather than between each letter.

4-Text-Decoration Property

Example: .retailprice {text-decoration:line-through;}

Values: underline, overline, line-through, blink. This is a very annoying property.

5-Text-Align Property

Example: p {text-align:right;}

Values: left, right, center, justify

6-Line-Height Property

Example: p {line-height:1.5;}

Values: any numerical value (no value type is needed)

7-Text-Transform Property

Example: p {text-transform: capitalize;}

Values: uppercase, lowercase, capitalize, none

text-transform changes the capitalization of text within an element. You can force a line of text to have initial letters capitalized, all text uppercase, or all text lowercase.

8-Vertical-Align Property

Example: vertical-align: 60%

Values: any length vaue, sub, sup, top, middle, bottom

Vertical-Align moves text up or down with respect to the baseline.