Comment puis-je remplacer les styles en ligne en HTML avec du CSS externe ?

Remplacer les styles en ligne par du CSS externe

Lorsque vous travaillez avec un balisage HTML contenant des styles en ligne, vous pouvez rencontrer des situations dans lesquelles vous devez les remplacer styles utilisant du CSS externe. Cependant, l'application de règles CSS classiques peut ne pas toujours fonctionner comme prévu.

Pour remplacer efficacement les styles en ligne, vous pouvez utiliser le mot-clé !important dans vos règles CSS. Ce mot clé ajoute une priorité plus élevée à la règle, lui permettant de prendre effet même lorsque des styles en ligne sont présents.

Par exemple, considérez le balisage HTML suivant :

<div>
<p>Si vous essayez pour remplacer le style en ligne de l'élément div à l'aide de la règle CSS :</p>
<pre class="brush:php;toolbar:false">div {
    color: blue;
}

Le style en ligne ne sera pas remplacé. Pour vous assurer que le style en ligne est écrasé, utilisez le mot-clé !important :

div {
    color: blue !important;
}

En ajoutant !important à la règle, vous lui donnez une priorité plus élevée sur le style en ligne. Par conséquent, le texte de l'élément div sera désormais rendu en bleu, même si le style en ligne définit explicitement la couleur sur rouge.