Resetear CSS: Cómo (Tripoli) y Para qué

Antes que nada, ¿qué es una hoja de estilos en cascada (CSS)? Un concepto, supongo, rápido y acertado sería: un documento de texto, con un formato determinado, que especifica el modo en que se mostrará cada uno de los elementos de una página web. De esto se podría desprender “desde el archivo CSS podríamos modificar el modo en que se ve toda nuestra página”; y de hecho, esto és asi.
Las sorpresas que nos llevamos al utilizar CSS

Seguramente si han trabajado con CSS, o al menos escucharon a alguien que trabajó con esto, saben que es algo complejo y complicado lograr que la página se vea igual en todos los navegadores. Algo que muchos no saben es el motivo de ésto, idea que intentaré explicar a continuación.

Cada navegador trae por defecto una hoja de estilos CSS. Como difieren entre una y otra -son diferentes- “saltan” los problemas. Si no usásemos ninguna hoja de estilos, y por ejemplo, hacemos un documento HTML sin formato, y abrimos este documento en varios navegadores; notaremos que se ven diferentes en cada uno. ¡Imagínense lo dificil que se pone la situación cuando hablamos de algo más complejo!
¿Cómo solucionar ésto?

Se han intentado varias cosas, pero una de las que mas me gusta -y que mejores funciona- es la de resetear los estilos que trae el navegador por defecto. De ese modo dejaríamos de partir de la base del navegador, es como que eliminamos la hoja que trae, y comenzamos “de cero” con nuestra hoja. Claro está, deberemos ser más detallistas en ésta última.

Para dejar de hablar tan abstractamente, veremos algunos ejemplos:

• Estilo predeterminado: como se dijo, las hojas de estilo predeterminadas de los navegadores son distintas entre uno y otro. Para comprobarlo, invito a abrir ésta URL en diferentes navegadores; que no tiene hoja de estilos aplicada, solo la predeterminada del navegador.
• Ahora, aplicando una hoja de estilo extra a la misma página, se produce el reseteo CSS, miren como se ve: link.
• Por último, ya logrando que la página se vea igual en todos los navegadores, aplicamos una segunda hoja de estilos: link.
  

Como ya deducieron, la última página que les pasé tiene 3+ hojas de estilo en juego:
1. La del navegador.
2. La encargada de “eliminar” la anterior (la que hace el reset).
3. Y por último, las que definen nuestros estilos; que pueden ser 1 o más.

Ahora adentrándonos a la puesta en práctica de esto, existen muchos reseteadores de CSS, pero en este apartado les dejaré los links de Tripoli, una buena solución para este tema. A continuación, las hojas de estilos que nos competen:

• reset.css
• generic.css
• ie.css
• print.css

Fuente: daniBlog vía Carlos Leopoldo