Les feuilles de styles complexes font souvent apparaître des contradictions entre les différentes règles. Cela se produit lorsqu'une propriété reçoit des valeurs différentes, avec des sélecteurs différents mais qui ciblent un ou plusieurs éléments identiques.

Cette page décrit le mécanisme standard de CSS pour résoudre ces conflits. Vous pourrez également vous reporter à la page sur la directive @layer qui permet de mettre en œuvre une autre gestion des priorités : les couches de cascade.

Les règles contradictoires.

Il arrive fréquemment que plusieurs règles CSS soient contradictoires. Cela se produit chaque fois que l'on tente d'affecter des valeurs différentes à une même propriété.

Par exemple, les deux règles CSS suivantes se contredisent sur le premier paragraphe. En effet, la première règle demande que l'élément dont l'identifiant est parag1 soit en rouge, tandis que la deuxième règle demande que les paragraphes soient en bleu. L'élément parag1 étant lui-même un paragraphe, il y a contradiction.

#parag1a {color:red;}
.exemple1 {color:blue;}

Voici comment s'affichera le code présenté ci-dessus. On voit que ce n'est pas nécessairement la dernière règle rencontrée qui est prioritaire par rapport aux précédentes. Dans cet exemple on voit que le sélecteur par identifiant ( # ) est prioritaire sur un sélecteur par type d'élément ( p ) : le style appliqué sur l'ID (couleur rouge) est prioritaire sur celui qui est appliqué sur la classe (couleur bleue) bien que ce dernier soit énoncé après.

p id="parag1a" class="exemple1a"
Le premier paragraphe.
/p

p id="parag1b" class="exemple1"
Le deuxième paragraphe.
/p

p id="parag1b" class="exemple1"
Le troisième paragraphe.
/p

Les priorités des sélecteurs.

Rappel : le sélecteur est ce qui détermine sur quel(s) élément(s) une règle CSS s'applique. Dans l'exemple ci-dessous, le sélecteur est .encart. Il désigne tous les éléments comportant l'attribut class="encart".

.encart {border:solid 1px silver;}

Tous les sélecteurs n'ont pas la même priorité. En cas de contradiction entre deux règles, celle qui s'applique est celle qui a le sélecteur le plus prioritaire. De façon générale, les sélecteurs ont une priorité d'autant plus grande qu'ils sont plus précis. Le sélecteur très général * a une priorité de 0. A l'inverse, un sélecteur sur un identifiant, qui en principe ne concerne qu'un seul élément de la page, à une priorité de 100.

Pour déterminer la priorité d'un sélecteur, il faut considérer la logique suivante :

Une règle avec la mention !important a une priorité de 10000.
Une règle écrite dans l'attribut style d'une balise HTML a une priorité de 1000.
Une règle avec un sélecteur sur un identifiant ( # ) a une priorité de 100.
Une règle avec un sélecteur sur une classe ( . ) ou des pseudo-classe ( : ) a une priorité de 10.
Une règle avec un sélecteur sur un type d'élément ( p ) ou des pseudo-élément ( :: ) a une priorité de 1.
Le sélecteur étoile ( * ) a une priorité de 0.

Les animations sont prioritaires par rapport à toutes les autres déclarations, sauf celles qui sont notées !important. Ce qui est logique sinon les animations ne pourraient jamais s'exécuter. Voir le tutoriel sur les animations en CSS.
Les transitions sont prioritaires par rapport à toutes les autres règles, y compris celles comportant la mention !important. Voir la propriété transition.

Lorsqu'un sélecteur comporte plusieurs parties combinées, les priorités de chacune des parties s'additionnent pour donner la priorité globale du sélecteur.
Une exception cependant : lorsque le sélecteur est composé de plusieurs parties séparées par des virgules, chaque partie est considérée comme un sélecteur à part entière. Chacune des parties peut éventuellement recevoir une priorité différente.

Enfin, lorsque deux règles contradictoires ont un sélecteur de même priorité, la dernière règle rencontrée remplace les valeurs définies par les règles précédentes.

Exemples :

/* Sélecteur sur un identifiant -> priorité = 100 */
#edito {color:blue;}

/* Sélecteur sur une pseudo-classe -> priorité = 10 */
:link {color:inherit;}

/* Sélecteur sur un type d'élément -> priorité = 1. */
p {font-size:1.1em;}

/* Règle comportant la mention !important -> priorité = 10000 */
p {color:silver!important}

/* Sélecteur désignant les images enfants l'élément #edit -> priorité = 101 */
#edit img {width:25%;}

/* Sélecteur désignant les images enfants direct d'une cellule -> priorité = 2 */
td > img {width:100%;}

Quelques sélecteurs particuliers.

Les sélecteurs :is() et :has() prennent la priorité du sélecteur le plus sélectif parmi ceux passés en arguments.

:is(#edito, .introduction)  /* Priorité = 100 (celle de #edito) */
:has(img)   /* Priorité = 1 (celle d'un sélecteur par balise) */

Le sélecteur :not() prend la priorité du sélecteur passé en argument.

:not(:first-line)   /* Priorité = 10 (celle d'une pseudo-classe) */

Le sélecteur :where() a une priorité de 0, bien que ce soit une pseudo-classe.

La valeur !important.

Le mot !important peut être ajouté à n'importe quelle valeur dans une règle CSS. Il rend la règle prioritaire. L'exemple ci-dessous est identique au premier sauf que !important figure dans la deuxième règle. On voit que la priorité des règles a été changée.

Le premier paragraphe.

Le deuxième paragraphe.

Remarque : la mention !important est à utiliser le moins possible.

L'emplacement des styles.

Les choses se compliquent si on considère que :

Plusieurs feuilles de styles peuvent être associées à une même page.
Des styles peuvent être écrits dans la page elle-même (dans la section head) ou dans l'attribut style des balises HTML.
Le navigateur dispose de sa propre feuille de styles, appliquée à toutes les pages qu'il affiche.
L'utilisateur (le lecteur ou l'internaute) peut lui-même définir ses propres styles.
Pour cette raison nous devrons distinguer les styles de l'utilisateur (l'internaute) et les style de l'auteur (celui qui crée le les pages).
Les styles de l'utilisateur sont peu utilisés et ont tendance à disparaître complètement. Voir le paragraphe sur les feuilles de styles utilisateur plus bas dans cette page.

Cela fait apparaître trois sortes de styles : les styles du navigateur, ceux de l'auteur (le web designer qui a travaillé sur le site) et ceux de l'utilisateur (l'internaute).

Le traitement de toutes ces feuilles de styles est effectué dans l'ordre suivant :

Le navigateur effectue une première résolution des conflits sur sa propre feuille de styles. Les valeurs obtenues seront utilisées si aucun autre style ne vient les modifier.
Dans un deuxième temps, il résout les conflits éventuels entre les sélecteurs de la feuille de styles de l'utilisateur. Les valeurs obtenues remplacent celles de la feuille de styles du navigateur.
Enfin le navigateur résout les conflits des sélecteurs sur la ou les feuilles de styles jointes à la page (balise link) et sur les styles décrits dans la page elle-même entre les balises style et /style). Les valeurs obtenues seront celles qui seront finalement utilisées.

Cependant, comme la possibilité laissée à l'utilisateur de définir ses propres styles est en voie de disparition, nous pouvons simplifier tout ça et considérer que :

Le navigateur affecte les valeurs définies dans sa propre feuille de styles après résolution des conflits éventuels.
Le navigateur résout les conflits de sélecteurs sur les styles de l'auteur et applique les valeurs obtenues à la place de celles de sa propre feuille de styles.

Il faut bien noter une chose qui est souvent mal comprise : les styles écrits dans la page elle-même, entre des balises style et /style, dans le section head, sont considérés avec la même priorité que les styles auteur provenant d'une feuille de styles externe. Firefox semble cependant leur donner un petit avantage en les explorant après les styles de la feuilles externe : ils peuvent donc être légèrement prioritaires si toutes les autres règles de priorité sont neutres.

En résumé, voici comment sont gérées les priorités entre les différentes feuilles de styles, en considérant également la valeur !important. La liste ci-dessous est triée du plus prioritaire au moins prioritaire.

Les effets de transition.
Les règles notées !important de la feuille de styles du navigateur.
Les règles notées !important de la feuille de styles de l'utilisateur.
Les règles notées !important de la feuille de styles de l'auteur.
Les animations.
Les règles de la feuille de styles de l'auteur.
Les règles de la feuille de styles de l'utilisateur.
Les règles de la feuille de styles du navigateur.

L'inspecteur.

Il existe un outil particulièrement pratique, fourni par la plupart des navigateurs et souvent nommé "l'inspecteur". On l'active en faisant un clic droit sur un des éléments de la page web affichée :
clic droit -> inspecter

L'inspecteur présente des quantités d'informations, aussi bien sur le code HTML, que sur les règles CSS appliquées à l'élément sur lequel on a cliqué. Il montre très bien en particulier la règle qui est active et celles qui ont été surchargées par une autre règle de priorité supérieure : les règles surchargées sont rayées.
L'inspecteur de styles, dans Chrome
Styles définis par l'attribut style de HTML.
Styles définis entre les balises style.../style dans la section head de la page.
Styles définis dans la feuille de styles externes.
Styles définis dans la feuille de styles du navigateur.
La feuille de styles utilisateur.

La feuille de styles utilisateur permet à l'utilisateur, c'est à dire l'internaute, de définir ses propres styles, qui seront appliqués à toutes les pages affichées.

Cette possibilité est peu utilisée et n'est finalement pas très utile car les styles définis par l'utilisateur sont appliqués à toutes les pages, sans qu'il soit possible de faire de différence d'un site à l'autre.

Chrome a désactivé cette possibilité. Firefox ne l'active plus par défaut. Il est cependant possible de l'activer sur Firefox avec le flag toolkit.legacyUserProfileCustomizations.stylesheets (accéder aux flags sur Firefox). Il eput être nécessaire de redémarrer Firefox.

Les styles utilisateur doivent être écrits dans un fichier nommé userContent.css et enregistré dans le dossier de profil. Pour créer ou éditer ce fichier procéder de la façon suivante :

Taper about:support dans la barre d'adresse.
Chercher Profile folder et cliquer sur le bouton Open folder. Le dossier de profil s'ouvre dans l'explorateur Windows.
Créer si nécessaire un sous-dossier nommé chrome en minuscules (oui c'est étonnant, le dossier s'appelle "Chrome").
Créer ou éditer le fichier userContent.css : écrire les styles utilisateur dans ce fichier.
Redémarrer Firefox.

Et les attributs HTML ?

A une époque déjà lointaine, il était courant de définir une mise en forme directement par des attributs HTML.

h1font color="blue">Titre de la page/fonth1

Les styles CSS sont TOUJOURS prioritaires sur les attributs HTML autres que style. Les attributs tels que color, size, etc. ne devraient d'ailleurs plus être utilisés puisqu'ils ne sont plus standardisés depuis HTML5.
Évolution des règles de priorité.

La gestion des priorités est, pour l'essentiel, resté inchangée depuis la première version du langage CSS. Le niveau 3 a simplement pris en compte les animations et les transitions dans l'ordre des priorités.

Voir aussi, au sujet des priorités.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété ref-priorities fait partie du module CSS Cascading and Inheritance. Les définitions suivantes sont également décrites dans ce module.
Propriétés :
all : Initialisation de toutes les propriétés.
Directives :
@import : Importation d'une feuille de styles.
@layer : Définit les couches de cascade (layer) pour faciliter la gestion des priorités entre les règles CSS.
Valeurs:
!important : Rend une règle prioritaire sur toutes les autres.
inherit : Donne à une propriété la même valeur que celle de l'élément parent.
initial : Redonne à une propriété sa valeur initiale.
revert : Donne à une propriété la valeur définie par le navigateur.
revert-layer : Rétablit la valeur d'une propriété à la valeur qu'elle avait à la couche précédente.
unset : Donne à une propriété la valeur qu'elle aurait eu si aucun style ne l'avait changée.