Lorsque vous appliquez plusieurs règles CSS au même texte, les règles peuvent entrer en conflit et produire des résultats inattendus. Le navigateur applique les règles CSS comme suit :
Si deux règles sont appliquées au même texte, le navigateur affiche toutes les propriétés des deux règles, sauf conflit de propriétés spécifiques. Par exemple, une règle peut spécifier que la couleur du texte soit bleue, tandis qu'une autre règle peut spécifier que la couleur du texte soit rouge.
Si les propriétés de deux règles qui s'appliquent au même texte sont en conflit, le navigateur affiche les propriétés de la règle la plus interne (la règle la plus proche du texte lui-même). Par conséquent, si une feuille de style externe et un style en ligne affectent un élément de texte, le style en ligne est appliqué.
Les propriétés des règles CSS personnalisées (règles appliquées à l'aide de l'attribut class) remplaceront les propriétés des styles de balises HTML en cas de conflit direct.
Dans l'exemple suivant, le style défini pour h1 spécifie la police, la taille et la couleur de tous les paragraphes h1, mais la règle CSS personnalisée .Blue appliquée à ce paragraphe remplacera les paramètres de couleur du style h1. Une autre règle CSS personnalisée, .Red, remplacera .Blue car elle se trouve dans le style .Blue.
<h1><span class="Blue">Ce paragraphe est contrôlé par le style personnalisé .Blue et h1
Style de balise HTML.<span class="Red">Sauf que cette phrase est contrôlée par le style .Red.</span>
Nous revenons maintenant au style .Blue.</span></h1>