Jugando piedra, papel o tijera con CSS

2 conceptos fundamentales para entender cómo funcionan las hojas de estilo en cascada son herencia y orden.

Herencia

Herencia significa que un elemento que desciende de otro, “hereda” atributos. Por ejemplo si para la etiqueta body defino que la fuente es Arial, un párrafo (que se encuentra dentro del body) automáticamente también tendrá fuente Arial.

Las propiedades que se heredan de manera predeterminada son:

table.parent{
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: 0;
}
table table{
  /* hereda los estilos de table.parent */
}
div{
  caption-side: left;
  color: black;
  cursor: pointer;
  direction: ltr;
  font: bold 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-family: serif;
  font-stretch: narrower;
  font-size: 16px;
  font-size-adjust: none;
  font-style: italic;
  font-variant: normal;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
  quotes: none;
  text-align: center;
  text-indent: 2em;
  text-transform: uppercase;
  white-space: pre;
  word-spacing: 5px;
}
div p{
  /* hereda los estilos de div */
}
ul.parent{
  list-style: none;
  list-style-image: url (bullet.png);
  list-style-type: disc;
}
ul.parent ul{
  /* hereda los estilos de ul.parent */
}

Orden

El orden se refiere a que el código se lee de arriba a abajo y el último gana. Es decir, si en una .css (interna en el head or externa via @import o link) defino que el color de los h1 es gris y luego en el HTML agrego un estilo inline estableciendo que el color es red, el título quedará rojo.

Resumiendo, el orden predeterminado es:

1. Predeterminado del navegador (ejemplo links azules y subrayados)
2. Hoja de estilo externa
3. Hoja de estilo interna
4. Estilo inline

Piedra, papel o tijera

La batalla se pone interesante, porque además de un orden predeterminado, los selectores tienen prioridades. Clase la gana a elemento e id le gana a clase.

Prioridades básicas (de menor a mayor):

1. elemento
2. clase
3. id

Por ejemplo: si está definido que el tamaño de fuente de los párrafos es 14px y para #destacado es 18px, el tamaño de fuente de un p id=”destacado” será 18px.

Cuando se juega con todos los selectores, la especificidad se calcula de acuerdo a la tabla de especificidad de la W3C. El cálculo es complejo y la causa de muchos errores de CSS se deben a que un estilo no está suficientemente especificado.

Resulta muy útil usar el Firebug para ver cuáles estilos son los que se están heredando. No se trata de llenar todo el documento con mil clases e ids, agregando los selectores necesarios alcanza y sobra.