El uso de la palabra !important

La palabra !important es algo que podemos agregar al final de una propiedad CSS y que realza cierto valor para, de esta forma, obligar a que se ignore una declaración y forzar un cambio.

Un ejemplo:

<a style="color: red !important;" href="javascript:void(0);">UN ENLACE ROJO</a>

Generalmente, los gadgets que agregamos incluyen ciertas propiedades sobre las cuales no tenemos control alguno así que podemos intentar sobrescribirlas usando esta palabra clave ya que nada impide usarla de manera inversa, es decir, declarando una propiedad ANTES que la otra. Explicación confusa pero veamos un ejemplo para probarlo de manera dramática.

La clase .post-body es la que por defecto, controla las propiedades de la entradas del blog. Podemos definirle una fuente de texto:

.post-body {
  font-family: Arial;
}

Si vamos al editor de entradas y allí escribimos algo, podemos formatearlo, cambiándole la fuente. El resultado será algo así:

<span style="font-family:courier new;">Integer vitae quam lectus! Donec sodales</span>

De ese modo, esa parte tendrá una fuente diferente a la definida por defecto. Primero decimos que es Arial y luego decimos que es Courier así que para el navegador, vale esta última porque SIEMPRE, las definiciones de estilo agregadas directamente a una etiqueta, tienen prioridad a las agregadas en la hoja de estilo. Pero ¿qué pasa si cambiamos la definición inicial y ponemos?:

.post-body span {
  font-family: Arial !important;
}

Pués entonces, sea lo que sea que pongamos en el editor, la fuente se mostrará en Arial y el navegador usará siempre esa fuente, aunque luego le digamos lo contrario.

Otro ejemplo:

a {color: red;}
a {color: blue;}

los enlace serán azules pero así:

a {color: red !important;}
a {color: blue;}

los enlace serán rojos.

Si bien la definiciones CSS se ejecutan de manera secuencial y la última sobrescribe a la anterior, hay una excepción y es cuando se encuentra una propiedad con la palabra !important. En ese caso, todas las demás declaraciones son ignoradas y lo único que podemos hacer para cambiar esto es agregarle esa palabra extra así que en el post de ejemplo, deberíamos escribir:

<span style="font-family:courier new !important;">Integer vitae quam lectus! Donec sodales</span>

Es por eso que debemos ser prudentes con el uso de esta palabra y sólo aplicarla cuando es absolutamente necesario ya que sino, nos veremos en problemas a la hora de corregir algo.