CSS en ligne et !important

CSS en ligne

On appelle le CSS en ligne (inline CSS) les déclarations CSS contenues directement dans le HTML.

Les CSS en ligne sont prioritaires sur le CSS des feuilles de style, et ont donc une priorité encore plus élevée que les sélecteur d’id par exemple. C’est donc tout autant une mauvaise pratique de les utiliser.

exemple

<p style="font-family: serif">Du texte.</p>

L’annotation !important

Les déclarations sont dites normales lorsqu’elles ne comportent pas d’annotation !important. Une déclaration avec l’annotation !important est prioritaire sur tout déclaration normale, qu’elle soit dans un fichier .css ou en-ligne.

exemple

Ci-dessous, l’instruction font-family: sans-serif !important; est annotatée avec !important : elle est prioritaire sur la déclaration en-ligne qui est une déclaration normale.

Par contre, l’instruction color: blue; n’est pas annotée : elle sera ignorée au profit de la déclaration en-ligne.

p {
   font-family: sans-serif !important;
   color: blue;
}

<p style="font-family: serif; color: red;">Du texte.</p>