CSS: The Missing Manual

The Importance of the Doctype

As discussed in the box in Section 1.2.4, HTML follows certain rules—these rules are contained in a Document Type Definition file, otherwise known as a DTD. A DTD is an XML document that explains what tags, attributes, and values are valid for a particular type of HTML. And for each version of HTML, there's a corresponding DTD. By now you may be asking, "But what's all this got to do with CSS?"

Everything, if you want your Web pages to appear correctly and consistently in Web browsers. You tell a Web browser which version of HTML or XHTML you're using by including what's called a doctype declaration at the beginning of a Web page. This doctype declaration is the first line in the HTML file and not only defines what version of HTML you're using (such as HTML 4.01 transitional) but also points to the appropriate DTD file out on the Web. When you mistype the doctype declaration, you can throw most browsers into an altered state called quirks mode.

Quirks mode is browser manufacturers' attempts to make their software behave like browsers did circa 1999 (in the Netscape 4 and Internet Explorer 5 days). If a modern browser encounters a page that's missing the correct doctype, then it thinks "Gee, this page must have been written a long time ago, in an HTML editor far, far away. I'll pretend I'm a really old browser and display the page just as one of those buggy old browsers would display it." That's why, without a correct doctype, your lovingly CSS-styled ...