Resetear el código CSS

Una de las dificultades con las que se encuentran los diseñadores de páginas Web es que cada navegador interpreta de una forma diferente los códigos HTML aplicando a veces ciertos márgenes y otras características de forma automática cuando no se especifica la información. Con las páginas de estilo CSS la mayor parte de estas irregularidades se suelen solucionar, aunque para asegurarse conviene resetear el código CSS. Las dos formas que tenemos de hacerlo es añadir una líneas extra al inicio o usando un archivo reset.css de forma previa a nuestra hoja normal de css, que habitualmente es llamada en español estilos.css o styles.css en inglés. ¿Quieres ver dónde puedes copiar y pegar estos códigos, y aprender que errores fatales puedes cometer con el reset.css cuando eres principiante?


La primera opción para resetear el código CSS es insertar directamente en la hoja habitual el siguiente código,
                 * { margin: 0; padding: 0; },

De esta forma te evitas añadir un archivo extra y es la forma que podemos usar en servicios como Blogger en los que no tenemos una hoja CSS externa. Para que sea efectivo y no de ningún error siempre se debe colocar al inicio de la cascada de estilos CSS.

La segunda opción, que es la más habitual entre los profesionales, es incluir un archivo reset.css en la carpeta FTP, y este archivo suele ser el reset.css que creó Meyer. Para que este reset sea efectiva se crea un enlace desde el archivo HTML. El vínculo tiene que estar al principio, antes de que pongas el enlace para llamar a la hoja de estilos CSS normal. De esta forma con el reset.css borrarás todas las peculiaridades del navegador y dejas el formato a cero, a continuación con la página estilos.css le das el formato y apariencia final a la página con la cual el aspecto será similar.

El error que no debes cometer con el reset.css es situarlo en una posición incorrecta, es decir, poner el link después de estilos.css, pues si lo haces así estarás borrando todas las ordenes que hayas dado anteriormente y todo el código HTML se presentará sin formato.

Imagen: propia, a partir de imágenes sin copyright.