Cuando aplica dos o más reglas CSS al mismo texto, las reglas pueden entrar en conflicto y producir resultados inesperados. El navegador aplica las reglas CSS de la siguiente manera:
si se aplican dos reglas al mismo texto, el navegador muestra todas las propiedades de ambas reglas, a menos que propiedades específicas entren en conflicto. Por ejemplo, una regla podría especificar que el color del texto sea azul, mientras que otra regla podría especificar que el color del texto sea rojo.
Si las propiedades de dos reglas que se aplican al mismo texto entran en conflicto, el navegador muestra las propiedades de la regla más interna (la regla más cercana al texto). Por lo tanto, si tanto una hoja de estilo externa como un estilo en línea afectan a un elemento de texto, se aplica el estilo en línea.
Las propiedades de las reglas CSS personalizadas (reglas aplicadas mediante el atributo de clase) anularán las propiedades de los estilos de etiquetas HTML si hay un conflicto directo.
En el siguiente ejemplo, el estilo definido para h1 especifica la fuente, el tamaño y el color de todos los párrafos h1, pero la regla CSS personalizada .Blue aplicada a ese párrafo anulará la configuración de color en el estilo h1. Otra regla CSS personalizada, .Red, anulará .Blue porque está dentro del estilo .Blue.
<h1><span class="Blue">Este párrafo está controlado por el estilo personalizado .Blue y h1
Estilo de etiqueta HTML.<span class="Red">Excepto que esta oración está controlada por el estilo .Red.</span>
Ahora volvemos al estilo .Blue.</span></h1>