<!DOCTYPE html>
<html lang="es">
<head>
<title>Jugando con estilos</title>
<style>
h1 {color:orange}
h1.verde {color: green}
.azul {color: blue}
#amarillo {color: yellow}
</style>
</head>
<body>
<h1 class="verde" id="amarillo" style="color:red"> Mi color favorito</h1>
</body>
</html>
El texto “Mi color favorito” se mostrará en color rojo.
Aunque hay múltiples reglas de estilo que podrían afectar al elemento <h1>
, la prioridad de aplicación de estilos en CSS se determina por la especificidad y el orden en el que se definen. Además, cualquier estilo definido directamente en un elemento HTML usando el atributo style
tiene la máxima prioridad.
Por lo tanto, debido a la prioridad del estilo inline, el texto “Mi color favorito” se mostrará en color rojo.