Cuando los navegadores nos muestran las páginas web, le aplican las hojas de estilos CSS que el programador/diseñador generó e incluyó dentro de su maquetación. Esto ya es algo sabido por la mayoría.
Pero lo que algunos no saben, es que el navegador aplica adicionalmente 2 hojas de estilos mas: la hoja de estilos del propio navegador y la hoja de estilos del usuario del navegador.
La hoja de estilos del navegador
Esta hoja de estilos se utiliza para establecer el estilo inicial por defecto de todos los elementos HTML, como ser: tamaño de letra, márgenes, decoración, etc etc.
Esta hoja de estilos se aplica siempre en primera instancia, y el resultado lo podemos ver si creamos una página a la que no le aplicamos ningún estilo CSS personalizado, es decir, sin estilos del programador/diseñador. El resultado que veremos entonces, es el de los estilos del navegador.
La hoja de estilos del usuario
Esta hoja de estilos es la que puede aplicar el usuario por medio de su navegador. Cabe aclarar que la mayoría de los usuarios no utilizan estos estilos, pero llegado el caso podrían personalizar los tamaños de textos, colores, etc etc.
Estas 3 hojas de estilos, las del navegador, las del usuario y las del programador, se aplican en un orden específico:
En primer lugar, se aplican los estilos del navegador
En segundo lugar, los estilos del usuario.
En tercer lugar, los estilos del programador/diseñador.```
Por lo tanto, tendránla prioridad máxima, los estilos del programador ya quese aplican en última instancia.
El problema principal
El GRAN problema es que los estilos de los navegadores no son iguales entre las diferentes marcas, y es por eso que al visualizar en diferentes navegadores, una página queno tiene estilos, la veremos diferente en cada navegador.
Si bien los diferentes navegadores presentan algunas configuraciones similares (tipo de letra Serif, color negro, etc), difieren bastante en los valores demárgenes verticales (margin-top y margin-bottom) de las etiquetas de títulos “<h1>” a “<h6>”, tabulación izquierda de los elementos de una lista (margin-left o padding-left), y el interlineado (line-height).
SoluciónLa solución a este gran problema, es realmente muy sencilla.
Se trata de borrar o poner a cero, los estilos CSS para evitar (sobre-escribir) los valores de las hojas de estilos de los navegadores.
Esta técnica se conoce comúnmente como Resetear CSS.
Laforma mas sencilla de hacerlo, es eliminar el margen (margin) y el relleno (padding), de todos los elementos HTML, para establecerlos posteriormente deforma individual.
Esto se podría lograr de esta forma:
Hay muchos mas tags que tienen estilos por defecto. Pero los que mas destacados son los margenes.
