The Breakdown
Allrighty, let's take a look at the actual code for this page and you can see what goes where.

Now, if you copied that into your own page, you would get something like this page (without the images). But let's break down the code a bit so you can see what is needed to make the CSS work.

<div class="title"> </div>
Here it is, what makes the CSS work. The DIV tag. Use this around everything that needs formatting with your CSS. Remember what you named all those tags in the actual style section? Those names go where the class="text" goes. Just replace 'text' with the name of the tag you want to use. The real advantage of this is that if you keep the same tag names, just modify the attributes, then you can update all your pages without having to go through and manually change each font! Yes, likes the preciousssss tags. *ahem* Make sure you CLOSE the tag with </div>! Otherwise, the page will just keep formatting all your text the same way.

<span class="title"> </span>
Here's another part you might want to use. DIV is for paragraphs and large amounts of content. SPAN can be used to change the color or other minor changes for a couple of words or lines. It's not a good idea to use it for header text or with borders or backgrounds because of how IE and Firefox display it differently. But it can be handy for minor things. I use it at the gwg to change text colors between the GW pilots.

In looking at that code, you may also notice this tag: <td height=100% valign=top class=text>
This is an easy way to format your text if you use tables. Yes, you can assign a class to a table's cell and save yourself a little trouble in formatting the text. I do it all the time as a matter of fact. ^_^; Until you learn CSS positioning, this is probally the easiest way to do it. In fact, I rarely use CSS positioning simply because IE and Firefox handle some of the tags differently, and it can be a pain to make it work in both browsers. Yes, you can only do it for one, but why alienate part of your audience?


Ok, that's about all I can think of! If you have any questions or opinions, just fill out the contact form on the main page. Thanks for playing, and good luck! ^_^

Back to Tutorials
(C) 2007 by Dubird. Anime character is Mutou Yugi-kun from Yu-Gi-Oh! (Shadow Game season), by Kazuki Takahashi and produced by Toei Animation..