Paragraphs

You're going to find that many properties will be utilized over and over to redefine different selectors, and eventually classes and pseudo classes (more on that later). It shouldn't be much of a stretch for you to determine how to redefine the text size, color and horizontal alignment for the paragraphs in your document if you know to use the p selector:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size:36px; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: 12px; color: #FFFFFF; text-align: justify;}
-->
</style>

Ok, that's easy enough. Let's get into a new property you might want to spend a little extra time exploring: line-height. Would you like to control the space between lines? Would you like to tighten it up, or double-space? Well, line-height is the property for you!

We're going to express values in terms of percentages, with 100% being "normal". So, 50% will scrunch lines together, and 200% would be about double.

I'm going to a line-height of 80% to start:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size:36px; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: 12px; color: #FFFFFF; text-align: justify; line-height: 80%;}
-->
</style>

This is what the results show in Internet Explorer:

You may enter the value as a positive number instead of a percentage. For instance, 1.2 is equal to 120%. When using a number, line-height is calculated by multiplying the value times the font-size. Try it:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size:36px; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: 12px; color: #FFFFFF; text-align: justify; line-height: 1.2;}
-->
</style>

You should also know that it is possible to set the line-height value as a measure of pts, such as:

line-height: 12pt;

Although this is possible, it is generally not recommend because it is an absolute measurement. If you reset the font-size, you will probably need to change the line-height as well if you are using pt measurements. However, if you are using percentages, the line-height will scale relative to the font-size.

Which is a good thing.

Check out what happens with a font-size of 24pt with line-height stuck at 12pt:

Yipes... that's uglier than I imagined. Please set line-height as a percentage, it will save you time in the long run!