ch

ap

te

r

1 What Are CSS and DHTML?

1

IN THIS CHAPTER

• What Is CSS?

• What Is DHTML?

• DHTML vs. Flash

• Browser Hell

• What You Need to Know Already

Welcome to the world of CSS (cascading stylesheets) and DHTML (dy-namic HTML) (technically, it’s “Dynamic HTML” without HTML beingspelled out)! There’s lots of good stuff here that gives you great controlover your Web pages, and even your Web site as a whole, which can saveyou and your users lots of time. Using CSS and DHTML can also be one ofthe most frustrating things you’ve ever done if you don’t pay close atten-tion to what you’re doing (trust me on this one—the stories I couldtell…). So, let’s go ahead and get started.

� What Is CSS?

CSS stands for “cascading stylesheets,” but we’ll just be callingthem “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 oftyping in some extra code. There’s nothing fancy about it.

ch01.qxd 6/14/01 10:31 AM Page 1

Placing stylesheet information into a Web page lets you setcertain aspects of that HTML page. For example, your stylesheetcould say, “Make all of the text in this Web page 16 point boldArial,” or “There’s a layer called ‘banner’ and it’s located at 60pixels over and 90 pixels down,” or even “When the <b> tag isused, make that text both bold and italic.”

CSS is a standard created by the World Wide Web Consor-tium, the same folks who define exactly what HTML is. There areseveral versions of CSS (the third version, CSS3, is being workedon right now). The browsers all implement variations of the firsttwo versions, CSS1 and CSS2. You don’t need to be concernedabout them in this book—we’ll look at what works without wor-rying about which version it is.

What Can CSS Do?Stylesheets can do three things:

1. Set the font of text on a page2. Define a layer and position it on the page3. Modify HTML tags

If you decide to use stylesheets to set your page’s fonts, youcan define different classes of fonts, like “headlineText” or“footerText” or “mainBodyText,” and use different fonts for allthree. This may not sound exciting, but if used properly, this cansave you hours and hours that you’d otherwise spend using thenasty and decrepit <font> tag.

When Is CSS Really Used?Stylesheets are really used only for the first two items above: set-ting fonts and positioning layers. You can use stylesheets to mod-ify HTML tags, but I (and most other Web developers) haven’tfound that to be very useful. It tends to confuse more than to fa-cilitate. So, I’ll be concentrating mostly on using stylesheets to setfonts and position layers throughout this book. I’ll show you howto modify tags, but there won’t be a lot of examples—that wouldbe 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 serveany real purpose.

2 Chapter 1 • What Are CSS and DHTML?

GEEK NOTE:To be fair, there are developers who find modifying HMTL tags to beuseful, and they modify vague tags to mean something specific, likethe EM or STRONG tags. Experiment to see what you prefer.

ch01.qxd 6/14/01 10:31 AM Page 2

� What Is DHTML?

DHTML literally stands for “dynamic HTML.” However, DHTMLreally means using JavaScript to manipulate stylesheets; that is,using JavaScript to hide, display, or move layers, or to change thefont 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 ma-nipulate HTML, right? Think about image rollovers and placingtext in form fields—that’s using JavaScript to change what’s onthe Web page. DHMTL is exactly that: using JavaScript to changewhat’s on a page. If you’re changing something that was set in astylesheet, like layers or fonts, you’re suddenly doing DHTML in-stead of plain ol’ JavaScript. “DHTML” is just a marketing termthat stands for a certain type of JavaScript usage.

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

What Can DHTML Do?DHTML can do all sorts of really interesting and fun things. Youcan 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 cre-ative. There’s no end to the things you can do.

The Limitations of DHTMLThe only real limitation of DHTML is the wildly different waysJavaScript 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 sothat it worked on all browsers and platforms than it took to buildthe rest of the site (including the back-end database stuff), al-most. 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, Igladly dumped it at the next revision of the site—it just took toomuch time.

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

What Is DHTML? 3

ch01.qxd 6/14/01 10:31 AM Page 3

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 com-pletely lost the browser war yet, so Netscape users must still beconsidered. Also, Netscape 6 is less popular than expected, soNetscape 4.x users must still be considered and coded for.

When to Use DHTMLTo be honest, I only use DHTML to make layers appear and dis-appear, and for simple animation. However, not everyone hassuch pedestrian ambitions for their DHTML, so you’ll find exam-ples that go beyond those few uses in this book. In fact, I expectto see a lot more DHTML on the Web fairly soon, now that al-most everyone has Netscape 4.7+ and IE 5.x. All the browser met-rics I’ve seen indicate that at least 95% of Web surfers have a4.0+ browser.

When you start to code your own DHTML, start small andsimple. It’s easy to make large promises to a client, and as a bril-liant programmer, I’m sure you’ll deliver on them, but you’llsave yourself a lot of heartache and late nights if you build yourpages in incremental phases.

� DHTML vs. Flash

Full disclosure: I love Flash. There aren’t any browser or platformissues with creating Flash movies. Of course, Flash requires adownloadable plug-in, but that’s gradually gaining in popularityas an acceptable thing for Web sites. Flash can do just abouteverything DHTML can, a lot of things it can’t, and the languageto control Flash (called ActionScript) is based on JavaScript, so it’spretty easy to learn.

4 Chapter 1 • What Are CSS and DHTML?

The decision to use Flash or DHTML rests primarily on yourtarget audience. Are you creating a bitchin’ cool site for teen girlsor a brochureware site for a marketing consultant intended for

SIDE NOTE:I’d be nuts if I didn’t make a shameless plug right now for my Flashbook, Advanced Flash 5 for Web Professionals. It’s got everything youneed to know about ActionScript. I had a blast writing it, and youmight like it too.

ch01.qxd 6/14/01 10:32 AM Page 4

corporate CEOs? Higher-up executive types tend to not want tospend valuable time downloading plug-ins, while teens are morelikely to. It all comes back to your audience and their typical behavior.

� Browser Hell

Web developers have hoped for years that eventually IE andNetscape would conform to the same standards. However, wenow have Netscape 4.x, Netscape 6, and IE each commandingsignificant market share. These browsers act oddly at times, sokeep your expectations low for writing code once and having itwork as expected on all browsers. If it does, sacrifice a mouse tothe browser Gods; they have been good to you.

� What You Need to Know Already

I mentioned this already in the Introduction, but not everyonereads the full introduction when they buy a book, so I’ll repeat ithere: You should know some JavaScript before diving into thisbook. You don’t need to be an expert, but you should know howto do image rollovers and how to place some text into a formfield. You can get by without knowing those things, but it’ll bemore of a struggle.

What You Need to Know Already 5

SIDE NOTE:Last shameless plug: If you need some JavaScript help, check out Es-sential JavaScript for Web Professionals by yours truly.

’Nuff said. Let’s get started with some stylesheets!

ch01.qxd 6/14/01 10:32 AM Page 5

ch01.qxd 6/14/01 10:32 AM Page 6