KuraFire Network

One of the things you'll notice real soon when you start working with %CSS%-based layouts is that browsers all have their own, fairly unique, default styling for the various elements. When encountering a display problem across multiple browsers, there's a good chance that one of them is applying different default styling to your elements. To accomodate and eliminate this possibility, I've been using an "initial" CSS file that neutralizes a lot of default quirks.

This post has been superseded by Starting with CSS: revisited. Please update your bookmarks to point to the new version!

This initial.css file has been used in all my projects (clients' and my own) for almost a year now, and over time it's expanded a little or, in some cases, a lot. For my CMS, the initial.css file has become rather large (for something that's only nullifying default behaviour) as it incorporates style rules for the output of the CMS itself. Granted, the bulk of that is layout-related by now, but still.

However, the basic core remains and it's still a useful way to start your CSS styling process. Let's analyze!

This example has been superseded by Starting with CSS: revisited. Don't use the code below!

* {
        margin: 0;
        padding: 0;
}

We begin with the star-selector. According to some, this "slows down the renderer," but I've never experienced anything of that kind. Maybe someone on a really slow computer can contact me so that we can do some tests? Regardless, the above CSS basically removes all default margin and padding from all elements. It's as simple as that.

Now, that may have taken all default margins and paddings away from it all, but in many cases you do want some margins and paddings to certain elements. Just consistantly across browsers. So let's put some good stuff back in:

This example has been superseded by Starting with CSS: revisited. Don't use the code below!

h1, h2, h3, h4, h5, h6, p, pre, blockquote,
label, ul, ol, dl, fieldset, address {
        margin: 1em 0;
}
li, dd, blockquote {
        margin-left: 1em;
}

There. Now all your content doesn't look like ants in a farm anymore. We've given lists and blockquotes their nice indent back, too. Time for the rest!

This example has been superseded by Starting with CSS: revisited. Don't use the code below!

html, body {
        font: 80%/130% Verdana, Arial, Helvetica, sans-serif;
}

First we take away that godawful Times New Roman default and replace it with a nice, smooth Verdana, with fallbacks. The font is specified in percentages to accomodate the greatest flexibility in layout without having to worry about text become too small on IE's "smallest" setting. This is explained in great detail in Elastic Design, by Patrick Griffiths.

Here's some advice for people still very new to CSS: now that the font is set to Verdana on the html and body elements (either would work just fine), you won't have to specify it again on any other element, unless you want to specify a different font somewhere.

Getting back to the initial, there is still some rules remaining:

This example has been superseded by Starting with CSS: revisited. Don't use the code below!

form label {
        cursor: pointer;
}
fieldset {
        border: none;
}

The <label> element has the great usability feat that it allows you to click it in order to put the focus on the form field it belongs to. This can be very helpful in complex forms, but it's still handy in even the simplest ones. There is a problem is, however: browsers don't generally indicate to the user that the labels are clickable. The first CSS rule above makes this happen, showing your users the "hand cursor" that they're used to for links (or better yet: clickable objects).

The second CSS rule is to remind you to use fieldsets. They are not mandatory to create a valid (X)HTML Strict document, but they are still worth using. Here's what the specification has to say about them:

The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

Because fieldsets have a default border that many have found to be ugly, people have tended to shy away from using them. But a simple CSS rule as seen above will remove that border for you. Alternatively, you can style the border (or the fieldset entirely) to be more visually pleasing and fit in your design.

Let's look at the end result:

This example has been superseded by Starting with CSS: revisited. Don't use the code below!

/* =INITIAL */
* {
        margin: 0;
        padding: 0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, 
label, ul, ol, dl, fieldset, address {
        margin: 1em 0;
}
li, dd, blockquote {
        margin-left: 1em;
}
html, body {
        font: 80%/130% Verdana, Arial, Helvetica, sans-serif;
}
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}

There, a lovely initial.css file that creates a nice, consistent layout, minimizing display problems caused by browser differences.

Note: this particular version has no padding applied to the html, body { ... } rule because there are many cases where the design will hit the edges of the window. In such situations, this padding would be unnecessary and would have to be removed again, or overwritten later on.

Note 2: for those who recognized it, yes I'm using Douglas's CSS Flags and so should you. It's just very convenient and well-structured.

Note 3: Krijn pointed out the important but fine detail that the above example of html, body { ... } will make your initial body font size become 80% of 80%. You may wish to change that for your own purposes.

Bookmark: Newsvine del.icio.us Digg