CSS can be added to your HTML page in 3 different ways:

1. Inline styles (which we already learned).
2. Within a style tag on the page.
3. As an separate "style sheet" file (which is the best way to do it).

As you can see in the sourcecode, directly above this table is a "style" called "maintext" - that word "maintext" is called a variable. Variables are a fancy computer-nerd term for "computer code that you get to make up a definition for". Variables can be whatever kind of name you want. We could call it "maintext" or "mastertext" or "applepie" or "poopyshoes" or "hamster" or whatever you wanna call it. Notice the parameters under "maintext"... look familiar? They are just like the "inline styles" you learned in previous pages! See? I told you learning "inline styles" would pay off... So, there you see how some CSS works just like the "inline style" does. This table cell then has a "class" parameter called "maintext" which calls the attributes in the "maintext" and applies them to everything in this cell. Make sense? So, first you create your custom code - the variable, which you can name anything you want. You assign some features and parameters to that variable - like what size font you want to use, and that the font should be bold. Then, you apply that variable to the text by saying, "Yo! Computer! Slap those styles onto this font right here!" Let's create a new style and add more parameters to the text...

But, wait! That's not all! Check this out! You don't have to call up the "class" inside of a table cell. You can also do it in a "span" tag, just like I showed you the inline styles.

So this inline style sentence look exactly the same...

as this stylesheet sentence right here.

But go check the sourcecode, and those previous 2 lines are totally different. One uses inline styles. One uses the stylesheet.

As you can see in the sourcecode, directly above this table is a "style" called "hamstertext" - that word "hamstertext" is called a very-stupidly-named variable. Notice the parameters under "hamstertext" are a bit more detailed? They feature a "color" and a "line height" and a "font family" - thankfully, these terms are pretty self-explanatory. "Line-height" controls the leading and "font-family" determines what font is used, in order of preference. In this case, the preferred font is Verdana. If the users computer does not contain Verdana, the browser will display the next font in the line, and so on, and so on, until the end of the list.

Okay, so that pretty much covers the second method. Let's move on...

"Whoa! Whoa! Whoa! Wait a second!" - I bet that's what you're thinking, right? Too fast? Too confusing?

Sorry. But, much like "tables", the concept of CSS is very powerful and very customizable. Therefore, I can't show you EVERYTHING that CSS is capable of doing. I'm just here to teach the BASICS - explain the easy features conceptually, so you can go out and learn the more complicated stuff on your own. So, if it seems like I'm leaving out a lot - yes, I am. That's the whole point. I'm getting your feet wet - not taking you for extended deep-sea-diving.

Finally, let's get to the best way to use CSS, which is putting all your CSS classes in their own separate file, and calling those CSS classes into your HTML page.

Why is that the best way?

Think about it. Suppose you build a website with 3 dozen pages and you have the exact same style of font on all 36 pages. Now, suppose you need to change that font - you want the color a little darker or you need the font-family to be a little more fancy.

If you embed the CSS on each individual page, you'd have to change the code and resave 36 different files (and hope you make no typos on those 36 pages as you're doing it!) That would be really time-consuming and have way too many chances for errors. If your font class was defined in one place, in a single file, you could make those changes once and they would "cascade" down to every page in your site - cascading style sheets! Great idea! Almost as cool as... a hottub time machine!

This text uses a class called "includedtext" which is defined in the "this-be-your-stylesheet.css" file. So, you won't find ANY information regarding the parameters for this text on the HTML page itself. Everything is in the "this-be-your-stylesheet.css" file and the "this-be-your-stylesheet.css" file is being referenced by the HTML page.

This text is also being controlled by the "this-be-your-stylesheet.css" file and is using a class called "additionaltext" for formatting. I added a "background-color" parameter too. Yeah, yeah, I know. It looks ugly and is hard to read. That's not the point! The point is to show you that there are other parameters which can be used in addition to the parameters we've already covered. Background colors. Borders. Padding. Margins. Centering the text on the page. All kinds of stuff.

Again, as with tables, I'm not going to cover every possible permutation of CSS styling - the possibilities are endless. I just want to give you a basic introduction so you can do research on your own. This way, when you research CSS on some website and it offers up an entirely new parameter you've never seen before, you will know where it goes and what to do with that parameter to test things out. Cool?

By the way, for those of you who are paying attention, you may have noticed I used a double-line-break for the last 2 paragraphs instead of a paragraph break. Did you catch that? Do you know why?... Because the paragraph-break broke the CSS background color in the Firefox browser. Why? No idea. But CSS often has funky cross-browser issues. Cross-browser oddities are one of the great banes of CSS. If you ever encounter any inconsistency in your CSS formatting between browsers, you may not have made a mistake - you might have all your code correct. You'll just need to dig around and do some research to figure out how to make things render consistently. In this case, using the double-line-break worked fine in all browsers, so I switched to that.

Okay, enough of that funky-looking text. Let's move on to the next type of code for the class - JavaScript.