JavaScript Materials

CSS Exercise

Excerpt from Mulder's Stylesheets Tutorial

Lesson 1, Page 2

by Steve Mulder


What Can Stylesheets Do for Me Today?

So what's so special about stylesheets? In a nutshell:

  • You can separate form and structure.
  • You can control layout like never before.
  • You can make smaller, faster pages.
  • You can maintain or update many pages at once, faster and easier than before.
  • You can be browser friendly.

Let's look at each benefit.

You can separate form and structure.

HTML was never meant to control the form or appearance of Web pages. It's a language that defines the structure and function of elements on a page. It lets the Web browser decide how those elements should actually appear.

But we perfectionist Web designers wanted more. So we rejoiced when Netscape invented new HTML tags that let us begin to control appearance. To make body text look the way we wanted, we surrounded the <P> with <FONT FACE>, <I>, and so on. And then we put everything inside a nested table and used invisible spacer GIFs to push it over 20 pixels to create a margin. What a mess. Our code became convoluted, and it was harder and harder to create or move content to the Web quickly.

Cascading stylesheets enable us to get more control the right way: by separating the part that defines structure from the part that defines form. The HTML remains clean and simple, as originally intended, and the CSS code controls appearances from afar.

You can control layout like never before.

Sure, <FONT SIZE> enabled us to resize text, and table tags helped us create margins. But overall, what we could do with HTML was very limited. We couldn't create text exactly 80 pixels tall, we couldn't specify margins easily, we couldn't control the space between lines or words, we couldn't precisely position images on the screen.

Until now. Stylesheets make all these things possible and more. And the promise of what's to come is even more exciting. In the next four lessons, you'll see what I mean.

You can make smaller, faster pages.

Here's more good news: Stylesheets are simple text, just like HTML. There are no graphics, no executable program, no plug-ins, no streaming, no delays. It's as fast as straight HTML code.

And with CSS, you can do things that you previously had to resort to GIFs for. But wait, there's more! As I mentioned earlier, cascading stylesheets also mean fewer table tags and other HTML hacks cluttering up your code. Less code and fewer graphics translate into smaller file sizes.

You can maintain or update many pages faster and easier.

Without stylesheets, if I wanted to update the font used for body text across my entire site, I'd have to manually edit each page. Even if my site were served from a database, I'd still have to update all the templates, and within each template, I'd have to change every single instance of good ol' <FONT FACE>.

The whole point of stylesheets is to separate form and structure. With stylesheets, I can have all the pages on my site point to a single CSS document. If I want to change the body text, all I do is change one line in this stylesheets document, and the entire site instantly changes.

You can be browser friendly.

Unlike some other Web technologies I could name, CSS code degrades gracefully. That is, users don't get a glaring broken icon if they're missing a plug-in or code gibberish if they're using an older browser. Browsers that recognize cascading stylesheets use it. Browsers that don't recognize CSS simply ignore it.