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 element adds spacing or a carriage return like result when used, or the size of the font and boldness for a h1 tag, along with the spacing.

I realize it is totally up to me how I want to set the style, but I want to get back to normal behavior for some of the more common elements (at least as a starting point that I can tweak later on).

Dysplasia

I’m trying to override a Wordpress theme style to reset the margins of a blockquote to the default instead of 0 which the theme sets. Unfortunately none of the answers seem to address this. ಠ_ಠ – Consubstantiation

Answer 1

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.

Hibernia

Answer 2

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.

Apoloniaapolune

Agreed. The YUI Base Reset builds up common element styles after applying the YUI CSS Reset to neutralize differences. Together they are a great tool in any web developers toolbox. – Apoloniaapolune

Answer 3

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/

Thickskinned

no I don't need the actual reset, just wanted to get the normal behavior which I guess is just the 1em on the margin-bottom thanks! – Dysplasia

if you want to be really pedantic/safe, you should re-specify things like font-sizing/bold/etc for elements too i guess... – Thickskinned

Answer 4

Rather than using a total CSS reset, think about using something like Normalize, which "preserves useful defaults".

To find out what your browser thinks of as default, open a plain HTML file with lists and view the lists with a CSS debugger like Firebug, and look under the Computed tab.

Tornado

Answer 5

Check out YUI (Yahoo's open source user interface conventions).

They have a base stylesheet that undoes their own reset css. They dont actaully recommend you use it in production - since its counter productive but definitely might be worth checking out the file to get relevant snippets for what you want to 'undo'.

I recommend you watch the 40 minute talk to get up to speed.

Heres a short snippet of their base.css file :

ol li {
    /*giving OL's LIs generated numbers*/
    list-style: decimal outside;    
}
ul li {
    /*giving UL's LIs generated disc markers*/
    list-style: disc outside;
}
dl dd {
    /*giving UL's LIs generated numbers*/
    margin-left:1em;
}
th,td {
    /*borders and padding to make the table readable*/
    border:1px solid #000;
    padding:.5em;
}
th {
    /*distinguishing table headers from data cells*/
    font-weight:bold;
    text-align:center;
}

Download the full stylesheets below or read full documentation.

Yahoo reset css | Yahoo base (undo) reset css

Patriarchy

YUI now has version 3 - so these links are probably out of date – Patriarchy

Answer 6

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.

Nauseate

@Nauseate is it easy/possible to tell from blueprint css how to undo specific things. for instance how to restore LI discs, or default padding for a page. obviously its easy to set these things, but hes looking for how to get back to things close to the original defaults. – Patriarchy

Blueprint CSS provides it's own set of (rather sane) defaults that are similar to what browsers provide by default. For instance, LI disks look normal, the space around H#s and Ps look normal, etc. – Nauseate

Answer 7

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.

Stomato

Answer 8

Normal behaviour for WebKit h1:

h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}

Normal behaviour for Gecko h1:

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

The rest of the elements should be there if you search the files.

Envelope

Answer 9

"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.

Parsons

Answer 10

Once you have assigned a value to a CSS property of an element, there is no way getting back the “normal” value for it, assuming “normal” means “browser default”, as it seems to mean here. So the only way to have, say, an h1 element have the browser default font-size is to not set the property at all for it in your CSS code.

Thus, to exempt some properties and elements from CSS reset, you need to use a more limited CSS reset. For example, you must not use * { font-size: 100% } but replace * by a list of selectors, like input, textarea { font-size: 100% } (the list could be rather long, but e.g. browser defaults for font-size differ from 100% for a few elements only).

It is of course possible to set properties to values that you expect to be browser defaults. There is no guarantee that this will have the desired effect on all browsers, current and future. But for some properties and elements, this can be relatively safe, because the defaults tend to be similar.

In particular, you might use section Rendering in HTML5 CR. It describes “expected rendering” – not a requirement, though browser vendors may decide to claim conformance to them if they so wish, and generally this will probably keep implementations rather similar in this respect. For example, for h1 the expected settings are (collected here into one rule – in HTML5 CR they are scattered around):

h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}

(There are additional contextual rules. E.g., nesting h1 inside section is expected to affect the settings.)

Vain

Answer 11

I'm not resetting all the elements by default because the default styles are somehow browser depended, so they varies from browser to browser. Instead of using something like ul, ol { list-style: none; }, I'm adding a CSS class like r or reset and then I specify that if that is a ul which has a r class, reset it or otherwise please leave it to be untouched.

By the way you need to add class="reset" (for example) to all of those elements, which is extra work and code, however you'd have all of your default styles untouched at the end in return!

Huckleberry