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

Normalize.css is a well known reset stylesheet that is used to align some base styles across browsers to set as a common ground for development.

Some developers find it redundant, or may prefer to use their own reset stylesheets. Many ready-made reset scripts are available, among them are the famous Eric Mayer's reset.css (used by BluePrint), and YUI2's stylesheet.

See also a post here on SO on the best CSS reset, and a best-of-collection of reset stylesheets.

Answer 2

Normalize is used to rest browser CSS. each and every browser having their own property for each DOM element and this property changes browser to browser.

html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
b,
strong {
  font-weight: bold;
}
img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
ol,
ul {
  list-style: none;
}
ol li,
ul li {
  display: list-item;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  height: 100%;
}
form {
  height: 100%;
}
/***************************************************************************************
* GENERAL STARTS
***************************************************************************************/
body {
  font-size: 12px;
  line-height: 18px;
  color: #444444;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
a {
  color: #3a7da3;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
  color: #444444;
  outline: none !important;
}
a:focus {
  color: #444444;
  outline: none !important;
  text-decoration: none;
}
a.active {
  color: #444444;
  text-decoration: none;
}
a.btn:hover,
a.btn:focus {
  text-decoration: none;
}
a .normal-link {
  color: #444;
  text-decoration: none;
}
a .normal-link:hover {
  text-decoration: underline;
}
p {
  font-size: 12px;
  margin-bottom: 15px;
  line-height: 20px;
}
.silent-text,
.silent {
  color: #a1a1a1;
  display: inline-block;
}
small,
.small {
  font-size: 11px;
}
/***************************************************************************************
* HEADINGS STARTS
***************************************************************************************/
/* All Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: 1.2;
}
h1,
.title {
  font-size: 36px;
  font-family: Arial, Helvetica, sans-serif;
}
h2,
.sub-title {
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}
h3,
.title {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}
/***************************************************************************************
* COMMON CSS STARTS
***************************************************************************************/
input[type=text]::-ms-clear {
  display: none;
}
.form-control {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #f9f9f9;
  border: 1px solid #ffffd;
  color: #444;
  padding: 6px 8px;
}
.form-control:focus,
.form-control.active {
  background: #ffffff;
  border-color: #cccccc;
  box-shadow: none;
  transition: border .2s linear;
  -webkit-transition: border .2s linear;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
}
.form-control-sm {
  padding: 3px 8px;
  height: auto;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed !important;
}
.form-control.active::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #444444;
  opacity: 1;
}
.form-control.active::-moz-placeholder {
  /* Firefox 19+ */
  color: #444444;
  opacity: 1;
}
.form-control.active:-ms-input-placeholder {
  /* IE 10+ */
  color: #444444;
  opacity: 1;
}
.form-control.active:-moz-placeholder {
  /* Firefox 18- */
  color: #444444;
  opacity: 1;
}
.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #BDBDBD;
  opacity: 1;
}
.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #BDBDBD;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: #BDBDBD;
  opacity: 1;
}
.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #BDBDBD;
  opacity: 1;
}
.has-error,
.form-control.has-error,
.form-control-validation {
  border-color: #cc0000;
}
.has-warning,
.form-control.has-warning {
  border-color: #f0ad4e;
}
.has-success,
.form-control.has-success {
  border-color: #5cb85c;
}
.has-error-text,
.form-group .has-error-text {
  color: #cc0000;
}
.has-error-text,
.form-group .has-error-text {
  font-style: normal;
  font-size: 11px;
  margin-left: 8px;
  line-height: 14px;
}
.has-warning-text {
  color: #f0ad4e;
  font-style: normal;
  font-size: 11px;
}
.has-success-text {
  color: #5cb85c;
  font-style: normal;
  font-size: 11px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  select.form-control {
    padding-left: 6px;
}
}
@supports (-ms-ime-align:auto) {
  select.form-control {
    padding-left: 7px;
}
}
/************************
Margin/Padding
*************************/
.m-t-xl {
  margin-top: 30px;
}
.m-t-lg {
  margin-top: 20px;
}
.m-t-md {
  margin-top: 15px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-0 {
  margin-top: 0;
}
.m-b-lg {
  margin-bottom: 20px;
}
.m-b-xlg {
  margin-bottom: 50px;
}
.m-b-md {
  margin-bottom: 15px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-0 {
  margin-bottom: 0;
}
.m-l-lg {
  margin-left: 20px;
}
.m-l-md {
  margin-left: 15px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-0 {
  margin-left: 0;
}
.m-r-lg {
  margin-right: 20px;
}
.m-r-md {
  margin-right: 15px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-0 {
  margin-right: 0;
}
.p-t-lg {
  padding-top: 20px;
}
.p-t-md {
  padding-top: 15px;
}
.p-t-sm {
  padding-top: 10px;
}
.p-t-xs {
  padding-top: 5px;
}
.p-b-lg {
  padding-bottom: 20px;
}
.p-b-md {
  padding-bottom: 15px;
}
.p-b-sm {
  padding-bottom: 10px;
}
.p-b-0 {
  padding-bottom: 0;
}
.p-b-xs {
  padding-bottom: 5px;
}
.p-l-lg {
  padding-left: 20px;
}
.p-l-md {
  padding-left: 15px;
}
.p-l-sm {
  padding-left: 10px;
}
.p-l-xs {
  padding-left: 5px;
}
.p-r-lg {
  padding-right: 20px;
}
.p-r-md {
  padding-right: 15px;
}
.p-r-sm {
  padding-right: 10px;
}
.p-r-xs {
  padding-right: 5px;
}
.no-mar {
  margin: 0 !important;
}
.no-pad {
  padding: 0 !important;
}
.p-l-n {
  padding-left: 0;
}
.p-r-n {
  padding-right: 0;
}
.p-t-n {
  padding-top: 0;
}
.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.font-md {
  font-size: 14px;
}
.font-lg {
  font-size: 16px;
}
img.img-responsive {
  display: inline-block;
  max-width: 100%;
}
.v-table {
  display: table;
}
.v-table-cell {
  display: table-cell;
  vertical-align: middle;
}
.relative {
  position: relative;
}
.float-none {
  float: none;
}
.d-i-b {
  display: inline-block !important;
}
.data-container {
  border: 1px solid #eeeeee;
  min-height: 600px;
}
.d-b {
  display: block !important;
}
.cursor-pointer {
  cursor: pointer;
}
.font-size-xs {
  font-size: 15px;
}
.text-left-xs {
  text-align: left !important;
}
.text-right-xs {
  text-align: right !important;
}
p.text-wrapping,
.text-wrapping {
  margin: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*----- Text ellipes CSS end ----*/

Answer 3

“Normalization” in the sense used in jsfiddle means applying a set of CSS rules purported to clean things up. It is more often called “CSS reset”, and it is a debated technique. The important thing to realize that when overriding browser defaults, it may also override default rendering that has been with us from the dawn of the Web, such as default top and bottom margins and some indentation for ul elements—and the default list markers (bullets). This depends on the particular “normalization” style sheet use, on its aggressiveness.

The normalization described on the W3C page mentioned has nothing to do with this. It deals with Unicode normalization of characters, something that happens (when it happens) at the character level, a relatively theoretical issue.

Answer 4

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