Trois titres, mais le second n'est pas centré !

Titre de niveau 1

Ce titre est centré, car dans le fichier CSS se trouve la ligne :
h1{text-align:center}
et, le code HTML du second titre est :
<h1>Titre de niveau 1</h1>

Titre de niveau 1

Ce titre est aligné à gauche, car dans le fichier CSS se trouve aussi la ligne :
.gauche{text-align:left}
et, le code HTML du second titre est :
<h1 class="gauche">Titre de niveau 1</h1>

Ce titre aurait dû être centré comme le premier, mais sa balise contient l'attribut class. Or, la valeur de cet attribut est "gauche" et, dans le fichier CSS, se trouve une classe du même nom qui contient une instruction différente.

Or, en CSS, les instructions données aux classes sont prioritaires par rapport à celles données aux balises. Au final, le texte de ce titre s'affiche donc à gauche.

Il est ainsi possible de créer des exceptions, de "dire" au navigateur : les titres sont centrés, sauf si la valeur de leur attribut class est "gauche".

Titre de niveau 1

Ce titre est centré, car dans le fichier CSS se trouve la ligne :
h1{text-align:center}
et, le code HTML du second titre est :
<h1>Titre de niveau 1</h1>