Las propiedades por defecto

publicado en la categoría CSS
Es habitual que se nos diga que para evitar problemas, lo mejor es resetear las propiedades CSS y para eso, hay decenas de reglas de estilo pre-diseñadas que nos aconsejan agregar a nuestro sitio. Pero, en realidad para un uso normal, tanta cosa suele ser excesiva y terminan confundiendo más de lo que aclaran. Lo más sencillo es entender por qué deberíamos hacer esto y luego, usar el sentido común para crear las reglas que nos sean útiles.

Toda propiedad CSS tiene un valor, lo hayamos indicado de modo explícito o no.

Si el valor ha sido definido en una regla de estilo, será ese el que usará el navegador; si no ha sido definido se usará el valor establecido por su contenedor (el elemento padre) y, si este último tampoco ha sido definido, se usará el valor por defecto que cada navegador decida.

El body de una página es donde están definidas por defecto algunas de esas propiedades.

Es más o menos conocido que el fondo (background) de una página es de color blanco y que el color de los textos (color) es negro pero tiene algunas más que suelen perturbar, por ejemplo, el margen (margin):

body {
	background: #ffffff url() repeat left top;
	color: #000;
	font-family: Times New Roman;
	font-size: 16px;
	margin: 8px;
}

Los enlaces también tienen propiedades por defecto, son de color azul y se muestran subrayados.

Todas las etiquetas de títulos tienen fuentes en negrita (font-weight:bold;) y además, un tamaño que está en relación al tamaño de la fuente definida en el body. Para colmo, también tienen márgenes:

h1 { font-size: 2em; margin: 21px 0; }
h2 { font-size: 1.5em; margin: 19px 0; }
h3 { font-size: 1.2em; margin: 19px 0; }
h4 { font-size: 1em; margin: 21px 0; }
h5 { font-size: .8em; margin: 21px 0; }
h6 { font-size: .7em; margin: 26px 0; }

Ni las etiquetas div ni span tienen propiedades por defecto pero si las tiene la etiqueta p; esta posee un margen superior e inferior igual al tamaño de la fuente por defecto:

p { margin:1em 0; }

Las imágenes que sirven como enlaces tienen un borde de color igual al color de los enlaces y las etiquetas blockquote y pre poseen un tipo de fuente especial y márgenes:

a img {
	border: 2px solid #0000ee;
)
blockquote {
	margin: 16px 40px;
}
pre {
	font-family: monospace;
	margin: 16px 0;
}

Probablemente, las etiquetas que causan más conflictos son las listas ya que tanto ol como ul tienen varias propiedades incluyendo márgenes y separaciones (padding):

ol, ul {
	list-style-position: outside;
	margin: 16px 0;
	padding-left: 40px;
}
ol { list-style-type: decimal; }
ul { list-style-type: disc; }

Es muy común leer que para evitar que todas estas propiedades no molesten, lo mejor es resetearlas, es decir, poner al inicio de nuestra hoja de estilo algunas definiciones que limpien esas reglas por defecto. Hay decenas de ejemplos que pueden buscarse online y que suelen suponer la descarga de hojas de estilo relativamente voluminosas pero, para un uso normal no es necesario tanta cosa, basta agregar unas pocas reglas personales, justo al inicio de la hoja de estilo:

Este es un ejemplo que incluye algunas propiedades que ayudan a optimizar el sitio en dispositivos móviles:

* {
	border: none;
	margin: 0;
	outline: none;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}
html, body {
	font-size: 100%;
	height: 100%;
	min-height: 100%;
	width: 100%;
}
a, a:visited, a:link, a:active, a:hover {
	outline: none;
	text-decoration: none;
}
a img {
	border: none;
	outline: none;
	text-decoration: none;
}
ol, ul, li { list-style: none outside none; }
button, input, select, textarea {
	color: inherit;
	outline: none;
	vertical-align: middle;
	-moz-appearance: none;
	-webkit-appearance: none;
}

Por supuesto, esto tendrá que verse caso por caso ya que es posible que algunas de las propiedades por defecto nos sean útiles y por lo tanto, no nos interese sacarlas pero, siempre es bueno saber que allí están y, cuando comenzamos un sitio nuevo, lo mejor es eliminarlas a todas y tomarnos el trabajo de definirlas una por una.