In the box below is a simple CSS stylesheet, one that just formats the text. We'll break down each part below, but if you'd like to see what it looks like, click here.

BODY {background:#e6e2c5;
	margin:0;
	font:11px Tahoma, Arial, sans-serif;
	}

/* regular text and titles */

P {font:1em Tahoma, Arial, sans-serif; 
	color:#33312d;
	}


h1 {font: 3em Tahoma, Arial, sans-serif;
	letter-spacing: -.02em;
	color:#d9d5bd;  
	font-weight: bold;
	margin-bottom: -10px;
	}

h2 {font: 1.3em Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	text-align:left; 
	color:#676e38; 
	border-bottom: 1px solid #bfb38f;
	padding-bottom: 2px; 
	padding-left: 7px; 
	}


/* links */

a:link {font:1em Tahoma, Arial, sans-serif;
	color: #6d854b;
	font-weight: bold;
	text-decoration: underline;
	}
a:active {color: #6b9923;
	text-decoration: none;
	}
a:visited {color: #8a8b83;
	text-decoration: none;
	}
a:hover {color: #99232e;
	text-decoration: underline;
	}
	

You'll notice there's a lot of tags that are repeated. I'll explain each one the first time it appears, but not each instance. That's because the defination won't change, just the actual settings. It may look confusing at first, but once you use the same tags several times, it's pretty easy to pick up on.

Let's start with the first tag set, the BODY tag.

This is the start of the page, and where you set your basic settings. Everything on the page will look here first for settings. If the setting is defined later on, this is what it defaults to.

background:#e6e2c5; This sets the background of the page. In this style, I've only set the background color. However, you can also set the background image, set if it will repeat, and if so, which direction.

margin:0; This is the space between the edge of the page and your content. If the margin is the same all the way around, you only need one number here. If they're different, you can set four numbers which will define the top, the right, the bottom and the left margins, in that order. You can use pixels (i.e., 5px) or percents (10%). Percents will resize with the browser window, which does come in handy sometimes.

font: 11px Tahoma, Arial, sans-serif; This sets the base size and typestyle of your font. There are many, many things you can use here, but it's good to stick with the basic fonts that come with all computers. You'll notice there are three listed there. The first one is the font I picked that I want to use. As common as it is, there may be some people that don't have it, so I added a second choice. And if they still don't have it, it will default to their system's setting for the sans-serif font. You can do the same with serif fonts (which are ones like Times New Roman that have the points on the ends of the letters), but I wouldn't recommend using more than three choices there.

Ok, let's move on to the next set of tags! You can skip the line regular text and titles. The */ and /* around it basicly tell the browser to skip what's inside there, so it's good to use for notes. I do that on all of mine now, just to make it eaiser to change later on. But, next tag.

You'll notice that I started with P. This is the <P> tag. This will define any <P> that is used in the document unless another setting is made later on. But for simplicity's sake, we'll leave this as one thing.

font:1em Tahoma, Arial, sans-serif; This is just repeating the font choice I set in the BODY tag. It's not always necessicary, but can be very useful. I've also set the size to 1em. 'Em' is a unit of measurement that refers to the actual size of the letters in the font. This is where the 'cascading' comes into play. See, we set the actual font size to 11px in the BODY tag. Now, 1em will mean that size. 2em will be twice that size, and so on. By using em in the rest of the stylesheet, you can adjust the size of all of them by changing one thing. Very useful when updating your site!

color:#33312d; This is the color of your text. Again, can be set in various tags, this will just be the default for the <P> tag.

Next, we move on to h1 and h2. Or, if you prefer, <h1> and <h2>. These are heading tags, and you can have up to 5 of them. Actually, I think you can go beyond that, but I've never had a need for that. These you can use for titles, subtitles, and the like. If you look on the sample page, h1 is the welcome at the top, and h2 are the subtitles.

letter-spacing: -.02em; This sets the spacing between letters. I'm using 'em' here so that if I change the size and typestyle, it'll work out the same. Negative moves the letters closer, positive moves them apart.

text-align:left; Aligns the text to the left. This is the default setting, but you can center the text or align it to the right of whatever section it's in. You can also set it to justify, so that it makes the ends of the lines even.

font-weight: bold; Makes the font bold.

text-transform: uppercase; This transforms the letters to uppercase, no matter what you put in.

border-bottom: 1px solid #bfb38f; This puts a border on the bottom, basicly giving it an underline. You can set the border for any side in this way, and set an equal border with just 'border'.

padding-bottom: 2px; padding-left: 7px; This puts some space between the edge of the section and the text. Padding is different than a margin in that padding is inside the box. Ok, that may not make much sense! Think of the div you're styling as a box. Margin is the space between the outside of the box and everything else. Padding is the distance from the inside edge to the contents. Also note that IE handles padding and margins differently than other browsers, so it's best not to put them in the same tag if you're setting the height or width. IE will display it differently if you do so.

Now, on with the links! You'll notice the format is a little different for these. That's because links have several parts; the regular link, a link you've visited, a link that's active (i.e. has been clicked on), and one your mouse cursor is hovering over. By setting it here, all your links will follow the same look unless you specify otherwise.

These are pretty simple. The first one, a:link sets the basic style of a link. Each one following will either add or change what you tell it to. For example, the font size is set to 1em (basicly, whatever the base size is for the container it's in). So, each link will be the same size unless I specify otherwise.

text-decoration: underline; This is the only unique tag I used here. Overall, it's good to live the underline in links because people are used to looking for that. If your link style is very unique and different than your reading text, it's not quite as important, but people are used to looking for links with underlines on them. You can set it to none to leave it off, or line-through to put a line through it. If you don't want an underline, you MUST define it here; a link has an underline by default.

That's all the tags I have up there! All the ones I've used up there are standard HTML tags that we've formatted. However, you can define custom tags as well. Let's take a look at one so you can see how it works.

As you can see, it's in the same format as the other tags, just with a '.' on the front. To use it, you simply define a class in the DIV tag, thusly: <div class="content">. This will format that DIV with the settings you choose in the stylesheet. You can have as many classes as you want, as well as use it many times in the page. So, let's take a look at the parts of this one.

font:1.2em Georgia, serif; I've set the font to 1.2 times the default size, as well as changed the font. Yes, you can have multiple fonts on a page, but it makes it much harder to read, so you're better off sticking with one, and maybe a second one for headers.

font-style: oblique; This sets the font to oblique. This will pick the italic version of the font, and if it doesn't have one, will slant it to right like italics.

text-transform: lowercase; Makes the text all lowercase, no matter what you put in.

background: #f3f0dd url(background.gif) top left repeat-x; This is background tag with many more attributes set. It starts with the color (#f3f0dd), then moves on to the image for the background. 'Top' and 'Left' is the position for the starting image, and 'repeat-x' tells the image to repeat side to side across the page. 'Repeat-y' would repeat the image up and down, and 'no-repeat' would just have the picture on there once.