• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



Creating Web pages used to be simple. You learned a few tags, created a few graphics, and presto: Web page. Now, with streaming video, JavaScript, CGI, Shockwave, Flash, and Java, the design of Web pages may seem overwhelming to anyone who doesn't want to become a computer programmer.

Enter dynamic HTML (DHTML) and cascading style sheets (CSS), technologies that give you—the Web designer—the ability to add pizzazz to your Web pages as quickly and easily as HTML does. With DHTML, you don't have to rely on plug-ins that the visitor might not have—or rely on complicated programming languages (except maybe a little JavaScript). For the most part, DHTML is created the same way as HTML and requires no special software.

What Is This Book About?

In the years since Netscape Navigator and Internet Explorer began supporting DHTML and CSS capabilities, the Web itself has changed significantly. The browser wars, the dot-com explosion (and subsequent crash), and the Web's enormous growth in popularity have led to a shakedown of the technologies that are regularly used to create Web sites. Both DHTML and CSS, however, remain two standards being used to create some of the best Web sites around.

In this book, I will show you the best ways to implement DHTML and CSS so that the broadest spectrum of the Web-surfing population can view your Web sites. To help organize the information, I have split this book into four parts:

  • Part 1 details how to use CSS to control the appearance of the content on Web pages. I will show you accurate ways to control the various aspects of how your Web page displays.

  • Part 2 deals with how to use the Document Object Model (DOM) with CSS and JavaScript to create basic dynamic functions. I will show you how to create a DOM that will allow you to run dynamic functions in most browsers with as little redundant code as possible.

  • Part 3 concentrates on how to create DHTML and CSS with two of the most popular Web-page-editing programs on the market: Adobe GoLive and Macromedia Dreamweaver. Although you do not have to use these programs to create Web sites with CSS and DHTML, they can make your life easier.

  • Part 4 will show you how to design a site with DHTML and CSS, and describes some of uses for these technologies. In addition, I will show you ways to debug your code and introduce you to some emerging dynamic technologies.

Who Is This Book For?

If the title of this book caught your eye, you're probably already well acquainted with the ins and outs of the Internet's most popular offshoot, the World Wide Web (or perhaps you're just a severely confused arachnophile). To understand this book, you need to be familiar with HTML (Hypertext Markup Language). You don't have to be an expert, but you should know the difference between a <p> tag and a <br> tag. In addition, several chapters call for more than a passing knowledge of JavaScript.

That said, the more knowledge about HTML and JavaScript you can bring to this book, the more you will get out of it.

Everyone Is a Web Designer

Forget about 15 minutes of fame: In the future, everyone will be a Web designer. As the Web continues to expand, a growing number of people are choosing this medium to get their message—whatever it may be—out to the rest of the world. Whether they are movie buffs extolling the virtues of The Third Man or multinational corporations extolling the virtues of their companies, individuals and companies see the Web as the way to get the message out.

The fact is, just as everyone who uses a word processor is at some level a typographer, as the Web grows in popularity, everyone who uses it to do more than passively view pages will need to know how to design for the Web.

Learning DHTML and CSS is your next step into the larger world of Web design.

Values and Units

Throughout this book, you will need to enter different values to define different properties. These values come in various forms, depending on the need of the property. Some values are straightforward—a number is a number—but others have special units associated with them.

Values in chevrons (<>) represent a type of value (Table i.1). Words that appear in the code font are literal values and should be typed exactly as shown.

Table i.1. Value Types
Value type What it is Example
<number> A whole 1, 2, 3
<length> A measurement of distance or size 1in
<color> A chromatic expression red
<percentage> A proportion 35%
<URL> The absolute or relative path to a file on the Web:  

Length values

Length values come in two varieties:

  • Relative lengths, which vary depending on the computer being used (Table i.2).

    Table i.2. Relative Length Values
    Name Type of unit What it is Example
    em Em dash Width of the letter M for that font 3em
    ex x-height Height of the lowercase x of that font 5ex
    px Pixel Based on the monitor's resolution 125px

  • Absolute values, which remain constant regardless of the hardware and software being used (Table i.3).

    Table i.3. Absolute Length Values
    Name Type of unit What it is Example
    pt Point Generally used to describe font size.1pt = 1/72 of an inch. 12pt
    pc Picas Generally used to describe font size.1pc ~ 12pt. 3pc
    mm Millimeters  25mm
    cm Centimeters  5.1cm
    in Inches 1 inch = 2.54cm 2.25in

I generally recommend using pixel sizes to describe font sizes for the greatest stability between operating systems and browsers.

Color values

You can describe color on the screen in a variety of ways (Table i.4), but most of these descriptions are just different ways of telling the computer how much red, green, and blue is in a particular color.

Table i.4. Color Values
Name What it is Example
#RRGGBB Red, green, and blue Hex-code value of a color (00-99,AA-FF) #CC33FF or #C3F
rgb Red, green, and blue (#R,#G,#B) numeric values of a color (0–255) rgb(204,51,255)
rgb(R%,G%,B%) Red, green, and blue percentage values of a color (0%-100%) rgb(81%,18%,100%)
name The name of the color Purple


Many of the properties in this book can have a percentage as their value. The behavior of this percentage value depends on the property being used.


A Uniform Resource Locator (URL) is the unique address of something on the Web. This resource could be an HTML document, a graphic, a CSS file, a JavaScript file, a sound or video file, a CGI script, or a variety of other file types. URLs can be local, which simply describes the location of the resource relative to the current document; or global, which describes the absolute location of the resource on the Web and begins with http://.

In addition, throughout the book, I use links in the code examples. I used the number sign (#) as a placeholder in links that can be directed to any URL you want:

<a href="#">Link</a>

The number sign is shorthand that links to the top of the current page. Replace these with your own URLs as desired.

However, in some links, placing any URL in the href will interfere with the DHTML functions in the example. For those, I used the built-in JavaScript function void():

<a href="javascript:void('')">Link</a>

This function simply tells the link to do absolutely nothing.


Certain colors always display properly on any monitor. These colors are called the browser-safe colors. You'll find them fairly easy to remember because their values stay consistent. For hex, you can use any combination of 00, 33, 66, 99, CC, or FF. For numeric values, use 0, 51, 102, 153, 204, or 255. For percentages, use 0, 20, 40, 60, 80, or 100.

Reading This Book

For the most part, text, tables, figures, code, and examples should be self-explanatory. But you need to know a few things to understand this book.

CSS value tables

In Part 1, each section that explains a CSS property includes a table to give you a quick reference to the different values the property can use, as well as the browsers and CSS levels with which those values are compatible (Figure i.1). The compatibility column displays the first browser version of Netscape and Internet Explorer that supported the value. Table i.5 lists the browser abbreviations I used.

Figure i.1. The property tables in Part 1 of this book show you the values available with a property, the earliest browser version the value is available in, and which version of CSS the value was introduced in. Keep in mind, though, that even if the value is available in a particular version of the browser, it may not be available in all operating systems. Appendix B shows which operating systems a particular value works in and if there are any problems.

Table i.5. Browser Abbreviations
Abbreviation Browser
IE3 Internet Explorer 3
IE4 Internet Explorer 4
IE5 Internet Explorer 5
N4 Netscape 4
N6 Netscape 6

The code

For clarity and precision, I have used sev- eral layout techniques to help you see the difference between the text of the book and the code.

Code looks like this:

  p { font-size: 12pt; }

All code in this book is presented in lowercase (see the sidebar "Uppercase or Lowercase Code"). In addition, quotes in the code always appear as straight quotes (" or '), not curly quotes (" " or '). There is a good reason for this distinction: Curly quotes (also called smart quotes) will cause the code to fail.

Important lines of code that I discuss on a certain page are emphasized by appearing in red in the code sample.

When you type a line of code, the computer can run the line as long as needed, but in this book, lines of code have to be broken to make them fit on the page. When that happens, I use this gray arrow (→) to indicate that the line of code is continued from above, like this:

.title { font: bold 28pt/26pt times,
 → serif;'color: #FFF; background-color:
 → #000;'background-image: url(bg_
 → title.gif); }

I often begin a numbered step with a line of code. This is intended as a reference to help you pinpoint where that step applies in the larger code block that accompanies the task.

Uppercase or Lowercase Code?

All the HTML code, properties, and values in this book are lowercase. Although HTML code can be uppercase or lowercase, an up-and-coming standard called XHTML requires all code to be lowercase (see "XHTML" in Chapter 29). XHTML is likely to be the future markup language for the Web, and to begin the transition now, I have started placing all my code in lowercase.

What Tools Do You Need for This Book?

The great thing about DHTML is that, like HTML, it doesn't require any special or expensive software. DHTML code is just text, and you can edit it with a program such as SimpleText (Mac OS) or NotePad (Windows). You do need to have one of the Version 4.0 browsers, however, to run most DHTML code.

Appendix E includes a list of extremely helpful (and mostly free) utilities and tools that I recommend to anyone who creates Web sites.

In addition, a couple of programs make life with DHTML and CSS much easier by automating many of the tedious and repetitious tasks associated with Web design. I recommend using Adobe GoLive or Macromedia Dreamweaver. Part 3 of this book can help you decide which program is better for you.

Web Sites for This Book

I hope you'll be using a lot of the code from this book in your Web pages, but watch out—retyping information can lead to errors. Some books include a fancy-shmancy CD-ROM containing all the code from the book, and you can pull it off that disk. But guess who pays for that CD? You do. And CDs aren't cheap.

But if you bought this book, you already have access to the largest resource of knowledge that ever existed: the Web. And that's exactly where you can find the code from this book.

This is my support site for this Visual QuickStart Guide (Figure i.2):


Figure i.2. The DHTML and CSS for the World Wide Web: Visual QuickStart Guide support Web site, open 24 hours a day.

You can download the code and any important updates and corrections from here. The site also includes other articles I have written about the Web.

If you do type the examples from the book, you might find that some do not work without the support files I used to create them. No worries—at the support site, you will find the various examples, which you can view live to compare results.

You have DHTML questions? I have DHTML answers. You can contact me at vqs-dhtml@webbedenvironments.com.

Also, be sure to visit Peachpit Press'own support site for the book:


Built with DHTML

In addition to the support site, I have set up a list of the most current DHTML-capable browsers at:


You can use the "Built with DHTML" logo (Figure i.3) to link to this Web page from your own DHTML Web site to help visitors find the right browser.

Figure i.3. Built with DHTML. Use this logo on your Web site to link to the list of DHTML-capable browsers I have set up.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint