CSS Reset, default styles for common elements

Question

After applying a CSS reset, I want to get back to \'normal\' behavior for html elements like: p, h1..h6, strong, ul and li.

Now when I say normal I mean e.g. the p e

Answer 1

You mean like:

* {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
    margin-bottom: 1em;
}

?

Actually, sorry I mis-read your question, you're after something more like Eric Meyer's total reset @ http://meyerweb.com/eric/tools/css/reset/

Answer 2

I'm personally a big fan of BlueprintCSS. It resets styles across browsers and provides some really convenient defaults (that are what you want 90% of the time). It also provides a layout grid, but you don't have to use that if you don't need it.

Answer 3

One of the rules in applying CSS styles is "last in wins." This means if your CSS reset styles set elements to margin:0; padding:0 you can then override these rules by declaring your desired values for the same elements afterwards.

You can do this in the same file (YUI offers a one-liner reset I think so I sometimes include it as the first line in my CSS file) or in a separate file that appears after the reset CSS <link/> tag.

I think by normal behavior you mean "the defaults for my favorite browser." Your building up CSS rules for these elements is a part of the reset exercise.

Now you might want to look into Blueprint CSS or other grid frameworks. These grid frameworks almost always first reset styles to nothing, then build up the typography for common elements, etc. This could save you some time and effort.

Answer 4

"After applying a CSS reset, I want to get back to 'normal' behavior for html elements..."

If you've applied a reset, you would then have to add the rules for what you believe to be normal behavior. Since normal behavior varies from browser to browser this question is something of a non sequitur. I like @da5id's answer - use one of the many available resets and tweak it to suit your needs.

Answer 5

YUI provides a base CSS file that will give consistent styles across all 'A-grade' browsers. They also provide a CSS reset file, so you could use that as well, but you say you've already reset the CSS. For further details go to the YUI website. This is what I've been using and it works really well.

Answer 6

If you want to see the css defaults for firefox, look for a file called 'html.css' in the distribution (there should be some other useful css files in the same directory). You could pick out the rules that you want, and apply them after a reset.

Also, the CSS2 standard has a sample stylesheet for html 4.