Les feuilles de style en cascade.

La cascade des feuilles de style est une des principales caractéristiques fondamentales du CSS d'où son nom en anglais: Cascading Style Sheets.

Il existe deux principes fondamentaux dans la conception de ces feuilles de style : la Cascade et l'Héritage, ce dernier étant traité par ailleurs.

La cascade de CSS définit un ordre de priorité (on parle aussi de poids), pour chaque règle de style dont je rappelle la liste :

 

- Feuilles de style externe

- Feuilles de style interne (dans HEAD)

- Style spécifié directement dans la balise (dans BODY)

 

Bien sûr cette multiplicité de possibilités offertes au webmaster peut engendrer très vite conflit entre des règles contradictoires écrites dans différents endroits et pour y remédier il existe une règle de base :

La dernière règle lue est prioritaire.

ce qui déjà permet de fixer l'ordre de la façon suivante :

 

- Entre interne et externe, priorité à la règle déclarée en dernier : l'interne est prioritaire sur l'externe, et la syntaxe du BODY est prioritaire sur l'interne du HEAD et l'externe.

- Si des déclarations contradictoires existent pour une même règle, c'est encore la dernière déclaration qui aura priorité.

Code dans HEAD

h1
{
font-family: verdana, arial, sans-serif ;
background-color: #FFFFFF ;
color: green ; font-size:12pt ; }

 

Code dans BODY

<DIV style = " font-family: verdana, arial, sans-serif ; color:blue ; color: maroon ; font-size:10pt ; font-size:16pt ;background-color: #FFFFFF ; "> texte de l'exemple... </DIV>

 

Résultat de l'exemple

... avec la couleur marron qui annule la bleue et le corps 16pt qui est aussi prioritaire sur le 10pt.

 

L'ordre de priorité est cependant inversé pour les règles "!important". Les règles d'un auteur et d'un utilisateur sont prioritaires sur celles de la feuille de style par défaut de l'agent utilisateur.

---

 

Valeur  ! important ou !important

Quand figure des déclarations avec " ! important ", elles surclassent les déclarations normales. Cette valeur apparaît en fin de déclaration.

p { font-size: 10pt  ! important ; }

 

Savoir : dans le cas où le visiteur a placé une feuille de style avec une ou plusieurs déclarations marquées de la valeur "! important", il aura priorité sur les déclarations de l'auteur de la page, même si ce dernier a aussi porté cette mention dans ses déclarations. Si le visiteur a prévu de visualiser le texte en 16pt car il a la vue faible, normal qu'il puisse le faire sans être obligé de "subir" une feuille où le créateur a proposé un texte en 10pt.

Exemple

Le créateur de la page a inclus la déclaration suivante dans son code HEAD : p { font-size: 10pt ! important ; }

Le visiteur a créé pour sa part une feuille de style (via son navigateur et "options internet" puis "accessibilité" sur IE) avec la déclaration suivante : p { font-size: 16pt ! important ; }

Ce dernier est prioritaire et le texte sera affiché sur son écran en 16pt.

 

Sommaire CSS ... @ ... Premiers pas avec les Classes