Bonus Question from Lesson 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.

If your browser doesn't support this CSS property, click here to see what it looks like.

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

(We'll be talking about that color property later in this lesson.)

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 Lesson 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 and 5 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.)

(By the way, considering my name, you knew I had to use an X-Files example eventually.)