TLA Tutorial: CSS, Part 1

Time for another in my attempts to make the obscure jargon of the tech world just a little more understandable. Today's topic? CSS.

CSS, which should not be confused with "CSI", has nothing to do with the forensic examination of a crime scene in order to discover who committed the dastardly deed. It stands for "Cascading Style Sheet" and, as its middle name implies, it is all about style.

In our last TLA tutorial, we talked about HTML tags. If you look at the source for a web page (under the "View" -> "Source" menu item), you will see a lot of things that look like <b>, <h2>, and <div class="sidebar">. Please remain calm. There is nothing to fear. Just relax and close the source window. Now as we learned in the first TLA tutorial, <b> just turns text that follows it bold, which stops as soon as you see </b>.

The next tag is a little trickier. <h2> says to treat the text following as a header (level 2). There are header levels one through six. The lower the number, the bigger and bolder the text. That last tag <div class="sidebar">, just says that everything after this mark is of this new type called "div", and further, we have given it an optional class name of "sidebar". You can think of it as having a particular group of objects called "people" and a particular class of "people" called "teachers".

Now your browser (Internet Explorer, Firefox, Mozilla, Safari, etc) has a default way of showing these different objects to you. For example, <h2> might show up as bold, 24-point, Times Roman font that is centered on the page.

Now, for the big secret. Are you ready for it? Make sure no one is looking over your shoulder, because we don't want this to get out.

CSS can change this to whatever you want. Scary, huh?

I'm not going to go into all the details of how to set up the CSS file, there are a number of good tutorials on how to do this (you can even see how to do this by just looking at the source, like we did above -- just search for the line that has "css" in it). Many HTML editors also generate their own CSS file, so you don't even need to look at it if you don't want to.

That's pretty much it. CSS just allows the web page designer to break out of the limitations of how the browser presents HTML. If you want your <h1> text (usually the title of the page) to be in 79-point (wow, that would be big), bold, blinking, purple Arial font, with a yellow and pink polka-dot background, you can do it. You should't, but you can. Remember Spider-man's motto, "With great power comes great responsibility".

Now, I can hear you thinking: "Hey! Wait a minute! That's the 'style' part. What about the 'cascading' part?", "Why did he tell us about <div> and 'classes'?", "Is he trying to rip us off?", and "I can put the red three on the black four." Don't fret. I will address the "cascading" issue in an upcoming post. For now, sit back and relax. Now you know that CSS is all about style and no one could accuse you of lacking style -- though you may want to reconsider the yellow and green paisley-print slacks. I'm just sayin'.

So, who was your favorite super-hero when you were growing up?