Esborreu el full d'estil del navegador: reset.css

Cada navegador té la seva pròpia manera de mostrar els elements d'un lloc web quan el full d'estil de la pàgina no està definit. Alguns navegadors utilitzen diferents marges, espai entre línies, mida de lletres, colors. Això fa que una mateixa pàgina, sense cap estil o CSS associat, es mostri d'una manera a l'Internet Explorer i d'altra al Mozilla Firefox.

És recomanable1) eŀliminar aquest full d'estil que incorpora de fàbrica els navegadors i així evitar possibles incongruències en el desenvolupament del vostre disseny.

Obriu l'editor i creeu el fitxer reset.css. Copieu les següents línies en el nou fitxer i deseu-lo en una carpeta anomenada css, que estigui al mateix nivell que l'arxiu index.html.

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Aquest fitxer reset.css és treball del dissenyador i desenvolupador Eric Meyer i està sota domini public.

Obriu el fitxer index.html i editeu la part corresponent a la capçalera (<head>…</head>) de l'estructura i afegiu la següent línia:

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen, projection"/>

Fixeu-vos en el canvi que suposa aplicar un estil que aplica un valor cero a l'estil propi del navegador:

Captura de la pàgina web amb el full d'estil del navegador Mozilla Firefox.

Captura de la pàgina web amb el full d'estil reset.css.

Ara podeu treballar des de cero i sense cap herència del full d'estil del navegador que pugui interferir en el vostre desenvolupament del CSS del lloc web.

1) Els dissenyadors web us recomanen l'ús d'un full d'estil que actuï de reset de l'estil imposat pels navegadors