Pour styliser une page web, on a le CSS, ça on l’a vu. On a vu dans l’introduction qu’on pouvait styliser les balises HTML. Ce qu’on va voir aujourd’hui c’est l’utilisation des classes CSS, et des identifiants HTML.
Les classes
Une classe CSS commence toujours par un « . ». Elle peut être attachée à une balise précise, ou être complètement détachée des balises pour être un peu plus généraliste.
Nous allons reprendre l’exemple HTML suivant (fichier « index.html »):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma seconde feuille de styles</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>Ma seconde feuille de styles</h3>
<p>Petit paragraphe d'<span>exemple</span> avec des <span>classes</span>.</p>
</body>
</html>
Dans notre feuille de styles « index.css » on pourrait mettre des classes. Pour quoi faire ? Simplement pour séparer deux types de contenus distincts, mais utilisant la même balise HTML. Dans le code HTML que je viens de vous fournir, on a deux fois la balise <span>. Si on utilise la feuille de styles de l’introduction, on aurait alors les deux mots « exemple » et « classes » en italique. Je souhaiterais que le premier reste en italique, mais que le second soit en caractères gras.
Nous allons le faire, avec des classes. Comme je l’ai dit précédemment, une classe CSS se définit toujours en commençant par un « . ». Nommons une classe « Italique », et une autre classe « Gras ».
Contenu du fichier « index.css » :
.Italique { font-style: italic; }
.Gras { font-weight: bold; }
Voila mes deux classes de définies. Utilisons-les maintenant dans l’exemple ci-dessus grâce à l’attribut HTML « class ». Puisque nous avons une classe générique, nous pouvons nous en resservir pour un autre élément HTML. Ajoutons donc un paragraphe italique.
Contenu du fichier « index.html » :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma seconde feuille de styles</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>Ma seconde feuille de styles</h3>
<p>Petit paragraphe d'<span class="Italique">exemple</span> avec des <span class="Gras">classes</span>.</p>
<p class="Italique">Copyrights Zebra's</p>
</body>
</html>
Les identifiants
Dans les attributs HTML existe l’identifiant définit par « id ». Celui-ci est censé être unique dans le document. Il est toutefois régulièrement utilisé en JavaScript pour identifier facilement un élément HTML précis. Sachez qu’on peut se servir des identifiants HTML au sein d’une feuille de styles.
Page « index.html », modifié avec des identifiants :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ma seconde feuille de styles</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h3>Ma seconde feuille de styles</h3> <p>Petit paragraphe d'<span id="Italique">exemple</span> avec des <span id="Gras">classes</span>.</p> <p id="Copyrights">Copyrights Zebra's</p> </body> </html>
En CSS, pour utiliser un identifiant HTML, il faut précéder son nom par un « # ».
Fichier « index.css », modifié avec les identifiants :
#Italique { font-style: italic; }
#Gras { font-weight: bold; }
#Copyrights { font-style: italic; }
Voila, ouvrez la page HTML avec votre navigateur, nous avons le même résultat que précédemment.
Simplifications
Notre dernier exemple peut être simplifié. Lorsqu’on utilise le même style sur plusieurs éléments HTML, on peut séparer nos identifiants et classes par des « , ».
Fichier « index.css » simplifié (identifiants) :
#Italique, #Copyrights { font-style: italic; }
#Gras { font-weight: bold; }
Les identifiants « Italique » et « Copyrights » auront désormais le même style appliqué, sans réécrire sans cesse la même chose. Plutôt pratique, n’est-ce pas ?
Attribuer une classe à un élément HTML précis
Autre chose que nous pouvons faire, c’est attribuer des classes à des éléments HTML spécifiques. La syntaxe est « élément.class { attributs; }« .
Exemple :
span.Italique, p.Copyrights { font-style: italic; }
span.Gras { font-weight: bold; }
Si on prend ce code CSS et qu’on le met dans notre premier fichier d’exemple, on aura une fois de plus le même résultat, mais écrit différemment.
La magie des CSS
On peut appliquer plusieurs styles différents en fonction de l’élément, de la classe, de son identifiant. On peut très bien utiliser plusieurs classes pour un même élément HTML, en les séparant par des » « . Mettons tout cela en pratique et faisons quelque chose d’un peu plus poussé.
Fichier « index.html » :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ma seconde feuille de styles</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h3>Ma seconde feuille de styles</h3> <p>Petit paragraphe d'<span class="Italique Gras">exemple</span> avec des <span class="Gras">classes</span>.</p> <p class="Italique">Copyrights Zebra's</p> </body> </html>
Fichier « index.css » :
.Italique { font-style: italic; }
.Gras { font-weight: bold; }
Cette fois, le résultat est qu’on a le mot « exemple » en gras et italique, le <span> ayant hérité des deux classes CSS, en prenant bien soin de séparer le nom des classes par un espace. On appelle cela la cascade.
Les priorités
Que se passerait il si on utilisait à la fois l’identifiant HTML, la classe CSS, l’attribut HTML « style », du code dans les balises <style>, et tant qu’à faire, qu’on utilise deux classes en même temps ?
Tout est question de priorités. En premier style défini, on a celui du navigateur lui-même. Celui-ci présente déjà des styles prédéfinis par défaut, et ce n’est pas forcément le même d’un navigateur à l’autre. D’où l’importance cruciale de faire un nettoyage en début de feuilles de styles. En second, qui vient écraser les paramètres du navigateur, on a le fichier CSS que l’on a lié au document HTML via la balise <link>. Ensuite viennent les styles définis dans l’entête du document HTML. En dernier lieu, celui qui vient écraser tous les autres et aura sa plus forte priorité est celui de l’attribut « style ». Je n’ai pas parlé des identifiants contre les classes, c’est le dernier lu qui l’emporte.
Pour résumer : <style> <– <link> <– CSS <– Navigateur.
Conclusion
Pour éviter toute confusion dans les styles, souvenez-vous bien des priorités, commencez par écrire les règles générales, puis les règles plus précises. Evitez de dédoubler les règles, évitez d’utiliser les identifiants le plus possible (réservez-les pour le JavaScript), pensez ) nettoyer les règles des navigateurs en début de feuille de styles, utilisez au plus possible les feuilles de styles externalisées que possible, définissez bien vos éléments, et ensuite vos classes.