Bonus Question from Part 3: How could you make a drop shadow effect using just CSS and HTML and no GIFs whatsoever?

Answer: By overlapping two lines of the same text phrase using negative margins.

The CSS rules used in the above example are as follows:

(We'll be talking about that color property later today.)

You can see how the shadow text is displayed first, followed by the text line, which, though it appears underneath the shadow line in the HTML code, actually appears slighly above it on the page because we use a negative top margin of -64 pixels.

Note: This isn't the best way to overlap text (I'm saving that for Part 5). One reason is that each browser has slightly different margin defaults, so whereas this drop shadow looks perfect in Communicator for Mac and IE 4 for Windows, it doesn't even look like a drop shadow in other browsers. (If it doesn't in your browser, play with the margin values until it does.)