Let's Make a Style Sheet

CSS in action

I'll start by giving you something to look at. It's a style:

.red { font-family: Times New Roman, Times, serif; font-size: 14px; color: #FF0000; }

This is a style I've named "red" (note the period before the word ".red" Don't leave it out). If we look at this we can see that I've defined the font family as Times New Roman, the size is 14 pixels and the color is red. This is text I've applied the style "red" to.

Now, in my web page, instead of putting the whole font tag song and dance in front of that last sentence, all I did was apply the style, by using the <span></span> tag. My source for it looks like this:

<span class="red">This is text I've applied the style "red" to. </span>

I didn't need to specify the type style or the size or the color because it's already in my style sheet, I just needed to tell it which style to follow. Tres cool, huh?

External or internal?

You can put your styles directly in your webpage if you like. You'd put your styles in the Header and enclose them all in one set of style tags <style></style> like this:

But a waaaay better idea is to use an external sheet, which is actually just a text file with all the styles used in your website. Just create a regular text file, then stick your css in there (as in the first example) but instead of saving it as .txt, save it as .css. We'll call ours Styles.css, which we then link to our page by putting this in the Header:
<link href="/Styles.css" rel="stylesheet" type="text/css">

And voila! Instead of all those fonts tags that take up space in our web pages, we've just eliminated a lot of code. Now, every time the browser sees the span tag, it'll go to the Styles.css, find the style it needs, and apply it to the text.

Gotta love a good streamline.

What's next? The magic and wonder of Server-Side Includes!