Fanzing's Web Design Tutorial

Part 9: Styles, Includes and Templates, Oh My!

You Keep Mentioning "Styles" and "CSS".  What's That?

Look again at Fanzing's Skeleton Page.  You'll see the term class= popping up here and there.  For instance:

<p class="intro">INTRO IF ANY OR ERASE </p>

In that example, the blue text is a standard HTML code (remove the red part and you'll see it's just a standard open/close paragraph) and the red part is a style class.  This because I am employing CSS.

CSS, or "Cascading Style Sheets" are the wave of the future…at least until someone comes out with something newer and better…in Web design.  While I won't teach you CSS here (there's already an excellent tutorial for that at Builder.com), I'll explain what it is and give you the basics so that you can use a few simple styles.

Let's look at that example code again.  I'm telling the computer that the following paragraph is going to be an "intro" paragraph, and I would like the class "intro" applied to it.  The computer knows what I mean by the "intro" because I've defined it in a style sheet.  "intro" means that everything within that paragraph will be

{font-family: Verdana,Arial,sans-serif; line-height: .9em; text-indent: .5em; font-weight: 700; font-size: 65%; }

In plain English, it means that the font face will be either Verdana, Arial or at the very least sans-serif (depending what the user has on his/her computer); the lines will appear a little closer together than normal; the first line will be indented just a tiny bit (.5 em means 1/2 of the standard width of the letter M in whichever font face is used); the font will be a little bit bolder than usual; and the letters will be only 65% of their standard height. 

Don't worry if you still don't understand the specifics of that coding.  I'm not trying to teach you CSS coding (as I said, there's a tutorial for that).  All it means is say the paragraph will appear in a different font, squished, dark and and small with a tiny indent on the first line.  Thus, it will look different than a standard paragraph!  The paragraph you're reading right this very moment is "intro" class, so if you're using Internet Explorer you can see what the results look like!  If you're using Netscape, it probably looks exactly the same.  This is because Netscape sucks.

Why Does Netscape Suck?

Netscape sucks because the current (summer 2000) versions of Netscape 4.7-whatever and earlier have not employed CSS standards.  I can do all the proper CSS coding I want to…and almost none of it will show up in Netscape Communicator 4.7. 

Microsoft Internet Explorer, meanwhile, has been compliant with most CSS standards since version 4.0!  This means that anyone using IE 4.0 or 5.0 can see all of the beautiful coding I'm doing, whereas people using any Netscape 4.7 or lower will see the plain old blah text.  I could tell the stylesheet to make all of the text in this paragraph 20 inches tall…and IE users would be looking at these gigantic letters, while Netscape would see tiny little letters.

The good thing is that Netscape 6 has finally caught up to where Internet Explorer was several years ago and now renders CSS just fine. Unfortunately, Netscape 6 is a horrible browser that tries to take control of everything on your computer, gobbles memory like crazy and is slower than molasses. I DON'T recommend Netscape 6.

Back to CSS, what it is, how it's used…

So, you kind of understand what a class modifier does, correct?  Add the "class= "and then the name of the class you are applying, and suddenly everything covered by that tag (paragraph tag, bold tag, header tag, whatever)will reflect the style defined by that specific class.  Let's look at the following two headers, which I copied from the top of the page.  If you're viewing this in Netscape, you'll see just two black headers, one larger than the other, in a standard font, on the left-hand side of the page.  If you're viewing this in Internet Explorer, you'll see the top header in blue and the smaller header in a dark blue, and they will be centered.

The top header is surrounded by an <h1> tag with the class of "title".  The second header is surrounded by an <h2> tag with the class of "SubTitle".  The coding for both of them looks like this:

<h1 class="title">Fanzing's Web Design Tutorial</h1>
<h2 class="SubTitle">Part 9: Styles, Includes and XML, Oh My!</h2>

Why Use CSS?

CSS is a great time-saver, once you're used to it.  It also allows you to make site-wide changes.  Here's how.

What I did for Fanzing was make a list of styles that I wanted to apply on all parts of the magazine.  I called this file "fanzing.css" and saved it in a folder for CSS styles.  Then, at the top of every page I made a link to that style sheet as the one which should be used on that page.  That CSS document defines the background color and pattern for every page, the standard font size (and color and face and bold-ness, etc etc) of the text within such things as paragraph tags and headers, and it defines a number of classes such as "title", "SubTitle" and "intro".

Now, if next year I have a change of heart and want to change the colors all over Fanzing from the current blue/green color scheme to red and gold, I'd open up that one CSS document and change the colors there.  For instance, the "title" class currently calls for all text within it to be blue.  I could change that to red.  Then, all headers on all of Fanzing's pages would be red, and it wouldn't have required me to meddle with any of Fanzing's actual pages.

One of the big advantages of CSS is that it will eliminate the <font> HTML tag.  Here's a practical example of how.

It used to be that Fanzing's pages were all <font size="+0">.  That means that I had to put the font tag <font size="+0"> around the bodies of every article on Fanzing.  (And actually, that's not the proper way to do it, but I won't embarrass myself by explaining how much I screwed up!)  Then, when I revamped Fanzing in 1999, I tried putting all of the text on a patterned background.  At font size +0, it was hard to read…but at font size +1, it was readable.  However, there was no easy way to change the body size of all the previous existing stories and articles!  Now…if I'd been using CSS all along, I'd have simply left font tags out of it completely and changed the size of text within paragraphs! 

You can see what an advantage it would have been if I'd been using CSS from day one, right?  That's why I encourage all of you, if you intend to do web design of your own, to learn CSS someday soon.

In our next section on reference materials, I will list a few of the classes, how they're used and what the effects are.  If you'd like to learn CSS coding, you can find a good tutorial at Builder.com.  I'll supply a link to it on the reference page.

All characters are ™ DC Comics
This piece is © 2000 by Michael Hutchison.
Fanzing is not associated with DC Comics.
All DC Comics characters, trademarks and images (where used) are ™ DC Comics, Inc.
DC characters are used here in fan art and fiction in accordance with their generous "fair use" policies.

Fanzing site version 7.1