Declaración !important en Css

Esta declaración nos sirve para dar prioridad a un estilo dejando de lado la cascada de prioridades que se establece por defecto. ¿Pero qué estás hablando?, lo vamos a ver con un ejemplo.

 

Analicemos el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>!important</title>
	<style>
		h1{color:green !important;}
		h1{color:yellow;}
	</style>
</head>
<body>
	<h1>¿Estoy de color Amarillo o Verde?</h1>
</body>
</html>

Te podrás dar cuenta que <h1> en este caso tiene dos colores definidos, en la primera línea le indicamos que sea de color verde y en la segunda de color amarillo.

Como podrás suponer los estilos son en cascada por lo cual el color que tomará <h1> será amarillo, pero, y aquí viene lo importante, al establecer !important este toma prioridad en la hoja de estilos y el resultado finalmente será que el <h1> en este caso será verde.

Este es un ejemplo muy sencillo y quizás no le veas la importancia, pero cuando trabajes con múltiples hojas de estilo te maravillarás con esta propiedad.

Recuerda suscribirte a mi canal de Youtube 🙂 https://www.youtube.com/bluuweb