What exactly does normalization in CSS do?

Question

I was trying some code with unordered lists in HTML on JSFiddle and I was irritated to death to find out that the bullets in the

won\'t show for no appar

Answer 1

Normalizing css tries to even out the differences between browsers when rendering html-elements. Many browser have "pre-settings": p and h-elements have vertical margins, lists have some margin and padding too. em and strong tags have bold font-weight.

All this pre-settings are reset, so that you have a consistent working-base in all the browsers.

JSFiddles normalize.css looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

The sense of normalizing css is debatable, since you have to redeclare every style manually in your stylesheet (even those presettings who make good sense, e.g. a simple font-weight on the em and strong tags which are treated equally by the browsers).

I used Eric Meyer's reset for some time, but stopped using it, since it reset far too many styles which needed redeclaration again. It wasn't worth it IMO.

For a REAL good style-normalizer take a look at the style.css from http://html5boilerplate.com/.