Get back default properties after applying a global CSS reset

Question

Some legacy code that I have to build upon, really makes me feel the cons of global CSS reset.

I have the old foo.css that starts with

Answer 1

I would think * {margin: auto} would reset margin (or h1 {margin: auto} if only that element is being reset.), but this will not work for padding. Technically, the spec is for padding to be zero already, however, if a browser implements it otherwise, I don't think there would be a way to reset it.

Answer 2

There’s the proposed value initial for setting a property to its initial value, without finding the explicit value. But it’s still very much draft-stage and hardly implemented in any browser.

Moreover, that’s probably even not what you’d like to achieve. If I understand you correctly, you would want to set e.g. the top and bottom margins of h2 elements to the browser default value. I don’t think there’s even any proposed way of doing that in CSS. The specifications do not define the browser defaults. The initial value of, say, the margin property is 0. The reason why headings have top and bottom margin by default is that the browser applies, at least conceptually, a browser style sheet. The CSS specs suggest a default browser style sheet but do not mandate one, and browser may (and actually do) deviate from the suggestions.

In practice, the best shot in the given situation would be to check Appendix D of the CSS 2.1 spec and use the values given there. For things like margins, this would mostly create the effect of using browser defaults.

Answer 3

Rather than wishing you could revert back to the browser-defaults, why not just set your own?

All you would need to do is add your declarations under your global CSS reset:

* { margin: 0; }
h1 { margin: 10px 0; }

The h1 takes precedence over the global selector *.

This would help normalize your CSS.