CSS significa Hojas de Estilo en Cascada. Con cascada, nos referimos que el browser lee esta hoja de estilos en orden descendente (haciendo analogía, una cascada cae de arriba hacia abajo). Así, en el caso de tener dos estilos similares definidos, el que venga en último lugar, o más abajo (orden descendente) tendrá más relevancia. O sea:
h1 { font-size: 22px; }
h1 { font-size: 48px; }En este ejemplo, tenemos definido en nuestra hoja de estilos para h1 dos tamaños diferentes, pero se mostrará finalmente el tamaño de 48px, ya que tiene más peso que el primero (lo sobreescribe si refieren pensar así).
Ahora, a través de una simple regla, es posible darle más relevancia a determinadas propiedades sobre todas las otras. Con !important, te aseguras que determinada propiedad sea aplicada sobre todas las otras. Utilizando el ejemplo anterior, tendremos el h1 de tamaño 22px:
h1 { font-size: 22px!important; }
h1 { font-size: 48px; }En hojas de estilos muy grandes, suele pasar que uno no se da cuenta y se provocan conflictos entre estilos. Con esta regla, podremos darle relevancia a la que nos interesa.
Comentarios
Buena referencia, como siempre fiel lector 😉
Sería bueno decir que solo para FF/Mozilla, Opera y Explorer 7, ya que como siempre en IE 6 o inferiores no funciona.
Enhorabuena por el blog.
Un saludo
hey david, gracias por tu aclaracion, pero permiteme aclararlo. IE6 siempre ha entendido !important. El problema viene cuando declaras una propiedad 2 veces seguidas, pero una de ellas con !important (similar al underscore hack).
Muy bueno, siempre había tenido la duda de para que servia.
cabe destacar que Internet Explorer no hace caso a este atributo !important
Te juro que no sabia para que se utilizaba….. me ha encantado este blog, en unpar de hojas y visto cosas que usaba y no sabia con detalle para que servian, excelente blog felicidades…
[…] Artículos con tags similares ¿Inherit? ¿Ah?Layout HíbridoLa verdadera !importanciaTransparencias a prueba de browsersCentrado Vertical con CSS (actualizado)Videocast 1: layout compuestoConvirtiendo Listas en Árbolestextos_muy_largos_que_quiebran_nuestro_layoutBloques de texto con estiloPropiedades del olvido: visibilityIE7 { css2: auto; }Selectores avanzados de atributosestilos de botones crossbrowserTexto auxiliar con estiloCentrando Horizontalmente (a prueba de IE)Nuevo sitio, nuevos métodosmenúes y la class .selected.clearfix: el widgetColumnas de igual altoAgregando movimiento vía JavaScriptLo ví y me gustó 18Lo ví y me gustó 17¡Aaaaabajo!Flotando en la incertidumbre […]
[…] de evitar !important. De eso se trata todo esto, entender cómo funciona para que no tengas que parchar utilizando […]