Application des styles

Comme nous l'avons vu, les caractéristiques de mise en forme peuvent provenir de différentes sources :

  • Des feuilles de styles externes ou internes;

  • Des attributs style dans les balises d'ouverture d'éléments HTML;

  • Des paramètres du navigateur

    • Paramétrage personnalisé par l'usager

    • Style par défaut du navigateur pour ce type d'élément

Il est ainsi possible, pour un élément, de retrouver plusieurs règles CSS définies. Qu'arrive-t-il en ce cas? Les deux sections qui suivent présentent quelques principes de base pour comprendre les différentes possibilités.

Héritage et fusion des règles CSS

Tous les éléments d'un document HTML n'ont pas besoin d'être présents dans une feuille de styles. Si aucune règle n'est spécifiée pour un élément, il y a deux possibilités :

  • Dans certains cas, l'élément peut hériter (notion d'héritage) des règles spécifiées pour l'élément parent (c'est-à-dire l'élément dans lequel il se trouve).

  • Si pour un élément il n'y a pas d'héritage ou si aucune règle CSS n'est précisée pour son élément parent, il sera restitué en fonction des paramètres par défaut du navigateur.

Par exemple :

1
body {color: red; font-family: sans-serif; font-size: 12pt;}
2
h1 {color: blue;}

Dans l'exemple ci-dessus, un élément h1, comme il est un enfant de l'élément body, serait présenté avec :

  • color: blue en raison de la règle définie à la ligne 2.

  • font-family: sans-serif ; font-size: 12pt en raison de la règle définie à la ligne 1. La propriété color: red de la ligne 1 ne serait pas appliquée, comme une autre couleur est définie par la suite à la ligne 2.

Donc, si plus d'une règle s'appliquent au même élément, les propriétés sont "fusionnées". Par ex. :

1
h1, h2, h3 {color: red;}
2
*.important {font-size: 200%;}

Dans l'exemple ci-dessus, un élément h2 avec class="important" serait présenté avec font-size:200% ET color: red.

Priorité des règles CSS

Si plusieurs sources spécifient des valeurs différentes pour la même propriété, la priorité suivante s'applique :

  1. Attribut style dans la balise de début de l'élément

  2. Feuille de styles interne

  3. Feuille de styles externe

  4. Paramétrage personnalisé du navigateur

  5. Style par défaut du navigateur

Par exemple, si vous voulez "surpasser" une règle définie dans une feuille de styles externe dans un cas particulier, il suffit de préciser les règles CSS soit dans l'entête de votre page HTML (feuille de styles interne) ou directement dans la balise d'ouverture de l'élément à modifier en lui ajoutant un attribut style.

Si des valeurs différentes pour la même propriété sont définies à l'intérieur d'une même feuille de styles (interne ou externe), la priorité dépend de l'ordre d'apparition : la règle apparaissant en dernier aura préséance sur les autres.