Enterprise Software

Debunking the myth of style defaults

Most Web builders take default styles for granted. But the small (and not so small) differences in the default style sheets of the various browsers are responsible for a significant portion of the page rendering inconsistencies between browsers.

There is no such thing as a totally unstyled Web document. Even if you don't link to an external CSS style sheet or add any embedded styles to the document, the page gets formatting information from the browser's built-in default style sheet. It's this built-in style sheet that establishes default formatting, such as the size and bolding of text marked up with the heading tags (h1 - h6) and the space above and below paragraphs.

Most Web builders take default styles for granted. They think of the formatting defaults as things that were standardized in the early days of the Web that will always remain the same. That's not entirely true. Although the default styles are generally quite similar in all the major browsers, there are some small (and not so small) differences in the default style sheets of the various browser brands and versions. These style sheet differences are responsible for a significant portion of the page-rendering inconsistencies between browsers.

That's the bad news. The good news is that you can do something about it.

Browsing without styles

Perhaps one of the best ways to gain an appreciation for the role of the browser's default styles is to try browsing some Web sites without the benefit of those default styles. It's an eye-opening experience.

Internet Explorer keeps its built-in style sheet well hidden, but it's fairly easy to find and experiment with the style sheet for Gecko-based browsers (Netscape, Mozilla, and Firefox). Eric Meyer explains how to do it in his article, "Really Undoing html.css." (It's one of his blogs for Sept. 15, 2004.) Basically, you locate the html.css file for your copy of Mozilla/Firefox, rename it or move it to a safe place, and go surfing. (Don't forget to restore the html.css file to its normal function when you complete this experiment.)

Note: If you aren't already using Firefox (or Mozilla), then this technique is reason enough to justify the download. I don't recommend that normal users experiment with browsing without a default style sheet, but it's an invaluable experience for serious Web builders.

Most Web pages nearly suffer a complete meltdown when you view them without the browser's default styles. To begin with, all the text from the <head> section of the document appears in the browser window. That's because it's a style from the default style sheet that normally hides the part of the document with a display:none rule. Another default style defines what HTML tags should display as block elements (display:block). Without it, everything displays inline, which means that everything runs together into a solid mass of text and inline images.

Without the browser's default style sheet, there's no separation between paragraphs, no list formatting, and no differentiation between headings—there's no formatting at all except for elements that are styled by the Web builder's CSS style sheet.

To get the full effect of the absence of a style sheet, you should create and view at least one test page without any CSS styles. It shocks even veteran Web builders when they see a totally unstyled document in a browser window.

In contrast, most Web pages include at least some CSS styling. Viewing those pages without default styles shows how much of the page formatting relies on styling inherited from the browser's default style sheet.

The role of the default style sheet

Another good exercise is to examine the contents of the html.css file. Aside from a few proprietary Mozilla attributes, it's a standard CSS style sheet, so anyone with a basic understanding of CSS should be able to make sense of most of the styles and see how they produce what we all think of as the "default formatting" for all the standard HTML tags.

Traditionally, Web builders rely on the browser's built-in style sheet for the default formatting and create site-specific and/or page-specific style sheets that change or add to those styles as needed. There is a deliberate effort not to duplicate the standard default styles because doing so would bloat the site's CSS style sheet with redundant code.

The success of that approach depends on the standardization and consistency of the default styles in the various browsers' built-in style sheets. Fortunately, all modern browsers follow well-established conventions for most of the default styles. Still, some annoying inconsistencies continue to plague Web builders. For example, page and element margins vary from browser to browser. The differences aren't huge, but they're enough to create some annoying discrepancies.

A careful assessment of the html.css file will provide insights into ways to override the undesirable effects of the default styles by incorporating similar style rules with different attributes into your own style sheets. The CSS styles that you create for your Web page override the browser's default styles for the same selectors, thus effectively redefining the default characteristics of the standard HTML tags.

Fixing some inconsistent defaults

The way to address inconsistencies in the default styles in the various browsers is to explicitly override those defaults with styles in your own style sheets. One way to do that is to duplicate the entire contents of the html.css file in your site's main CSS file, but with your own choice of attributes replacing the browser defaults. By replacing all the browser default styles, you'd get the same results across all CSS-compatible browsers and platforms.

Although the approach will work, it's overkill. There's no need to duplicate default styles that are consistent across all browsers, such as the style that hides the contents of the head tag; only the inconsistent styles need to be replaced. The trick is to identify the inconsistencies and the styles needed to correct them.

Recently, there has been a flurry of activity among several prominent Web designers. Their various articles and blog entries propose various strategies and code snippets for counteracting some of the problematic parts of the browser default style sheets.

Tantek Celik's undohtml.css removes inconsistencies that bother him by: zeroing out the margins and padding on the body tag (and a long list of other tags); removing list markers; making all the heading tags the same size; and other similar changes. Obviously, his approach for removing the inconsistencies is to strip away the formatting. This leaves a page using this style sheet almost completely unstyled. It creates a "clean slate" so that subsequent styles can build the desired page formatting without being influenced by inconsistencies in browser defaults.

Eric Meyer takes a different tack in " Fractionally Restoring html.css," where he speculates on the advisability of creating an abbreviated html.css file and using it for testing Web sites under development. The test styles would hide the head info, display block elements, restore lists and table elements, and nothing else. Viewing a page with Firefox using such an abbreviated set of defaults would make it easy to spot elements that weren't fully styled by rules in your site's style sheet and, therefore, relied on styling inherited from the browser defaults.

Andrew Krespanis proposes one of the most practical solutions to date in his article, "Global White Space Reset." He doesn't attempt to address all the default styles, just the ones controlling margins and padding, which are often the most troublesome. Inserting the following few lines of code at the beginning of your site's main CSS style sheet would effectively set the margins and padding for most of the commonly used tags, and do so consistently across all modern browsers.

* {
    padding:0;
    margin:0;
}
body {
    padding:5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset,
address {
    margin:20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
fieldset {
    padding:10px;
}

Part of the beauty of this code is the use of the asterisk (*) global selector in the first style. That one style zeros out the margin and padding on all tag selectors, and then the rest of the code proceeds to set Krespanis' preferred margin and padding values for the selectors he chooses. This basic approach should work for most any Web site.

Editor's Picks

Free Newsletters, In your Inbox