Cada navegador tiene una hoja de estilos base distinta, aunque las diferencias no son muy grandes pueden hacer que lo que en un navegador se visualice correctamente en otro no o simplemente que se vea distinto.
Una forma simple de ver las diferencias es probar un código HTML sin aplicarle estilos en diferentes navegadores para ver como hay elementos que tienen estilos predefinidos (pero no estándar) como por ejemplo los enlaces o las listas, pero no es solo eso los elementos pueden tener márgenes o altos de línea distintos. Y por este motivo surge la necesidad de resetear los estilos para poder comenzar los diseños sin interferencias.
La idea del CSS reset es quitar los estilos a todos los elementos para que se comporten igual en todos los navegadores, en realidad tampoco se llega hasta el punto de quitar todos los estilos sino hasta un punto que podamos considerar como base, porque qué sentido tiene por ejemplo que eliminemos los tamaños de fuente de los títulos o hacer que un div se muestre como un elemento en línea.
Podemos definir nuestro propio CSS reset pero si no vamos a querer nada especial y no tenemos pensado crear un template que defina todos los estilos desde 0 pues podemos utilizar alguna de las hojas de estilo que podemos encontrar como la siguiente que he sacado de html5doctor.com, y que está basada en el reset de Eric Meyer uno de los más populares.
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
Los reset CSS como el anterior están bien cuando vamos a crear aplicaciones o webs con estilos con diseños muy elaborados en los que se dedica mucho tiempo y se cuida hasta el mínimo detalle, pero este no es el caso de los proyectos «normales» en los que el diseño empieza desde un punto de partida más alto porque no es necesario llegar a personalizar todo para conseguir un buen resultado y por eso hay otra «nueva» corriente en la que la idea no es «acabar» con los estilos base si no establecer una nueva base que se muestre igual en todos los navegadores siguiendo los «estándares» actuales del diseño web. En esta línea es muy popular normalize.css, también frameworks como Bootstrap siguen por este camino con reboot.css
