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 ![]()
and
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 tag is used, 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 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 wor- rying about which version it is.
What Can CSS Do? Stylesheets can do three things:
1. Set the font of text on a page 2. Define a layer and position it on the page 3. 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 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’t found that to be very useful. It tends to confuse more than to fa- cilitate. 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.
2 Chapter 1 • What Are CSS and DHTML?
GEEK NOTE:
To be fair, there are developers who find modifying HMTL tags to be useful, and they modify vague tags to mean something specific, like the EM or STRONG tags. Experiment to see what you prefer.
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 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 dis- appear, and for simple animation. However, not everyone has such pedestrian ambitions for their DHTML, so you’ll find exam- ples 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 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 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 bril- liant 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.
DHTML vs. Flash
Full disclosure: I love Flash. There aren’t any browser or platform issues with creating Flash movies. Of course, Flash requires a downloadable plug-in, but that’s gradually gaining in popularity as an acceptable thing for Web sites. Flash can do just about everything DHTML can, a lot of things it can’t, and the language to control Flash (called ActionScript) is based on JavaScript, so it’s pretty easy to learn.
4 Chapter 1 • What Are CSS and DHTML?
The decision to use Flash or DHTML rests primarily on your target audience. Are you creating a bitchin’ cool site for teen girls or 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 Flash book , Advanced Flash 5 for Web Professionals. It’s got everything you need to know about ActionScript. I had a blast writing it, and you might like it too.
corporate CEOs? Higher-up executive types tend to not want to spend valuable time downloading plug-ins, while teens are more likely to. It all comes back to your audience and their typical behavior.
Browser Hell
Web developers have hoped for years that eventually IE and Netscape would conform to the same standards. However, we now have Netscape 4.x, Netscape 6, and IE each commanding significant market share. These browsers act oddly at times, so keep your expectations low for writing code once and having it work as expected on all browsers. If it does, sacrifice a mouse to the browser Gods; they have been good to you.
What You Need to Know Already
I mentioned this already in the Introduction, but not everyone reads the full introduction when they buy a book, so I’ll repeat it here: You should know some JavaScript before diving into this book. You don’t need to be an expert, but you should know how to do image rollovers and how to place some text into a form field. You can get by without knowing those things, but it’ll be more 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!
