Welcome to the world of CSS

What Are CSS and DHTML?
by Dan Livingston, from the Book Essential CSS and
DHTML for Web Professionals
JAN 18, 2002

Welcome to the world of CSS (cascading stylesheets) and DHTML (dynamic HTML) (technically, it's "Dynamic HTML" without HTML being spelled out)! There's lots of good stuff here that gives you great control over your Web pages, and even your Web site as a whole, which can save you and your users lots of time.

Using CSS and DHTML can also be one of the most frustrating things you've ever done if you don't pay close attention to what you're doing (trust me on this one—the stories I could tell...). So, let's go ahead and get started.

What Is CSS?

CSS stands for "cascading stylesheets," but we'll just be calling them
"stylesheets" from now on. For all practical purposes, stylesheets are as much a part of HTML as the <img>and <table> tags. Adding stylesheet information to a page is just a matter of typing in some extra code. There's nothing fancy about it.

Placing stylesheet information into a Web page lets you set certain aspects of that HTML page. For example, your stylesheet could say, "Make all of the text in this Web page 16 point bold Arial," or "There's a layer called 'banner' and it's located at 60 pixels over and 90 pixels down," or even "When the <b> tag is used, make that text both bold and italic." CSS is a standard created by the World Wide Web Consortium, the same folks who define exactly what HTML is.
There are several versions of CSS (the third version, CSS3, is being worked on right now). The browsers all implement variations of the first two versions, CSS1 and CSS2. You don't need to be concerned about them in this book—we'll look at what works without worrying about which version it is.

What Can CSS Do?

Stylesheets can do three things:

Set the font of text on a page
Define a layer and position it on the page
Modify HTML tags

If you decide to use stylesheets to set your page's fonts, you can define different classes of fonts, like "headlineText" or "footerText" or "mainBodyText," and use different fonts for all three. This may not sound exciting, but if used properly, this can save you hours and hours that you'd otherwise spend using the nasty and decrepit <font>tag.

When Is CSS Really Used?

Stylesheets are really used only for the first two items above: setting fonts and positioning layers. You can use stylesheets to modify HTML tags, but I (and most other Web developers) haven't found that to be very useful. It tends to confuse more than to facilitate. So, I'll be concentrating mostly on using stylesheets to set fonts and position layers throughout this book. I'll show you how to modify tags, but there won't be a lot of examples—that would be like showing you the
proper way to ride a bicycle underwater. I'll show you how to do it, but an extended tour wouldn't serve any real purpose.

What Is DHTML?

DHTML literally stands for "dynamic HTML." However, DHTML really means using JavaScript to manipulate stylesheets; that is, using JavaScript to hide, display, or move layers, or to change the font of some text as a user rolls a mouse over it.
That's really it. Here's another way to think of it: You can use JavaScript to manipulate HTML, right? Think about image rollovers and placing text in form fields—that's using JavaScript to change what's on the Web page. DHMTL is exactly that: using JavaScript to change what's on a page. If you're changing something that was set in a stylesheet, like layers or fonts, you're suddenly doing DHTML instead of plain ol' JavaScript. "DHTML" is just a marketing term
that stands for a certain type of JavaScript usage.

If this isn't clear right now, don't worry. It will be. I'll spend the next chapter looking at stylesheets and the rest of the book will look at using JavaScript.

What Can DHTML Do?

DHTML can do all sorts of really interesting and fun things. You can create little games, sliding pop-up menus, draggable images, interactive quizzes, and the like. Internet Explorer (IE), especially, has all sorts of great extensions that will let you get pretty creative. There's no end to the things you can do.

The Limitations of DHTML

The only real limitation of DHTML is the wildly different ways JavaScript is treated in the different browsers. This is a big, fat, hairy limitation. For example, I once created a scrolling multiple-line text field in DHTML. It had arrows, a slider bar, everything. It took longer to build that little scrolling thing so that it worked on all browsers and platforms than it took to build the rest of the site (including the
back-end database stuff), almost. Building it for one browser and platform wasn't too tough, but once I started looking at the other browsers and platforms, the development time increased tremendously. Needless to say, I gladly dumped it at the next revision of the site—it just took too much time.

I bring up this story as a potential warning: If you get really fancy with DHTML, you will pay. Development time to make your code work on the various browsers and platforms will take way longer than it should. If you think you're done, look at your page on a Macintosh running IE 4.5.

Everything in this book is fully cross-browser and cross-platform. In fact, I'm ignoring everything that's Netscape-specific or IE-specific. As of this writing, Netscape hasn't completely lost the browser war yet, so Netscape users must still be considered. Also, Netscape 6 is less popular than expected, so Netscape 4.x users must still be considered and coded for.

When to Use DHTML

To be honest, I only use DHTML to make layers appear and disappear, and for simple animation. However, not everyone has such pedestrian ambitions for their DHTML, so you'll find examples that go beyond those few uses in this book. In fact, I expect to see a lot more DHTML on the Web fairly soon, now that almost everyone has Netscape 4.7+ and IE 5.x. All the browser metrics I've seen
indicate that at least 95% of Web surfers have a 4.0+ browser.

When you start to code your own DHTML, start small and simple. It's easy to make large promises to a client, and as a brilliant programmer, I'm sure you'll deliver on them, but you'll save yourself a lot of heartache and late nights if you build your pages in incremental phases.