CSS Reset

0Sebastian Barria • 7th Mar 2010 • CSS, Web

Como todos sabrán (todos los webmasters), en un desarrollo web profesional, es necesario conseguir que cada una de las páginas se vea exactamente igual en cada uno de los distintos navegadores (IE6, IE7, FF, Opera y Safari, al menos).

Esto se consigue a través de un archivo reset.css, que debe ser llamado al principio de la hoja de estilos principal. Este código, permite que todos los elementos de un sitio se vean igual en todos los navegadores.

En realidad, su objetivo principal es eliminar cualquier estilo que venga por defecto en un navegador. Por ejemplo, los H1 o los UL vienen con márgenes por defecto, que no siempre sin iguales en todos los navegadores. Este código, establece, para todos esos elementos margin: 0;.

El código

Bueno, bueno… basta de cháchara y vamos a lo que nos interesa; el código:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td,span{
	margin:0;
	padding:0;
}
body{
	font: 62.5% Arial, Helvetica, sans-serif;
}
table{
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
}
fieldset,img, abbr, acronym{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
ol,ul,dl{
	list-style:none;
}
caption,th{
	text-align:left;
}
img{
	border:0;
}
h1,h2,h3,h4,h5,h6{
	font-size:1em;
	font-size:100%;
	font-weight:normal;
}
a{
	outline:none;
}

El código anterior, debería pegarse en un archivo CSS nuevo y guardarse con el nombre reset.css.

Para llamarlo, se debe escribir al principio de la hoja de estilos principal de la página – antes de cualquier otra definición de estilos – la siguiente línea:

@import url("reset.css");

Y eso es todo. Fin. Fácil, no?

Después de esto, se puede comenzar a definir todas las propiedades que se necesiten para cada elemento de la página.