Teoría
Teoría

Estilos en línea y !important

La batalla está por terminar. Para asegurar la victoria, Rodolfo recurre a una jugada prohibida: asigna los estilos directamente en la etiqueta del pollo mediante el atributo style.

Los estilos normales del atributo style tienen prioridad sobre las declaraciones normales de las hojas de estilo. Este modo de aplicar estilos no suele recomendarse para organizar el CSS de un sitio; puede servir para crear un prototipo rápido. Por eso lo llamamos una jugada prohibida.

Sin embargo, existe una forma de sobrescribir desde un archivo CSS incluso los estilos normales del atributo style: usar !important. Esta palabra clave da mayor prioridad a la declaración. Veamos un ejemplo:

HTML:

<p style="color: red;" class="blue">¿Azul o rojo?</p>

CSS:

.blue {
  color: blue !important;
}

En este ejemplo, el texto será azul.

No conviene usar !important con frecuencia. Siempre que sea posible, intenta resolver los estilos sin él.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Estilos en línea y !important</title> <meta charset="utf-8"> <link rel="stylesheet" href="battle.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>¿Quién se quedará con el pollo?</h1> <div id="keks-vs-rudolf" class="battle"> <div class="cat cat-keksik">Cupcake</div> <div class="cat cat-rudolf">Rodolfo</div>  <div style="margin-left: 120px;" class="chicken to-keksik to-rudolf"></div> </div> </body> </html>

CSS

/* Aquí no basta con aumentar la especificidad del selector. Habrá que responder a una jugada sucia con otra */ .to-keksik { margin-left: -120px; }

ObjetivosRealizado

Haz justicia y devuelve a Cupcake su merecido premio.

No puedes cambiar los valores de las propiedades CSS: el sistema lo detectará y no aceptará el resultado.