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.