L'utilisation des feuilles de style CSS (Cascadign Style Sheets) permet de définir l'apparence des éléments HTML. Il existe plusieurs méthodes pour intégrer des styles, chacune avec ses avantages et ses limites.
Intégration des styles CSS
Les styles peuvent être appliqués de trois manières principales : en ligne, internes et externes.
Styles en ligne
Cette méthode consiste à ajouter l'attribut style directement sur une balise HTML. Elle offre une personnalisation rapide mais réduit la réutilisabilité du code et alourdit le balisage.
<article style="width:300px; height:150px; background-color:#f0f0f0;"></article>
<article style="width:300px; height:150px; background-color:#f0f0f0;"></article>
Styles internes
Les styles sont définis dans une balise <style> à l'intérieur de l'en-tête <head> du document. Cela centralise les styles pour la page courante.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page d'exemple</title>
<style>
.conteneur {
width: 300px;
height: 150px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="conteneur">Contenu exemple</div>
</body>
</html>
Styles externes
Les styles sont placés dans un fichier séparé avec l'extension .css, puis liés au document HTML via une balise <link>. Cette méthode favorise la réutilisation et la maintenabilité.
<!-- Dans le fichier HTML -->
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page externe</title>
<link rel="stylesheet" href="styles/base.css">
</head>
<body>
<div class="boite">Contenu stylé</div>
</body>
</html>
/* Dans le fichier base.css */
.boite {
width: 250px;
height: 120px;
border: 1px solid #ccc;
}
Les sélecteurs CSS
Les sélecteurs permettent de cibler des éléments HTML spécifiques pour leur appliquer des styles.
Sélecteur de balise
Cible tous les éléments d'un type donné. Exemple pour colorer en vert tous les titres de niveau 2 :
h2 {
color: green;
}
Sélecteur d'identifiant
Utilise l'attribut id pour cibler un élément unique. L'identifiant doit être unique dans la page.
#en-tete-principal {
background-color: #333;
color: white;
}
<header id="en-tete-principal">Titre du site</header>
Sélecteur de classe
Utilise l'attribut class pour cibler plusieurs éléments. Une même classe peut être appliquée à plusieurs éléments, et un élément peut avoir plusieurs classes séparées par des espaces.
.alerte {
color: red;
font-weight: bold;
}
.important {
border: 2px solid orange;
}
<p class="alerte important">Message crucial</p>
<p class="alerte">Autre message</p>
Sélecteur universel
Cible tous les éléments. Souvent utilisé en début de fichier pour réinitialiser les marges et paddings par défaut du navigateur.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Sélecteurs de descendance et d'enfants
Le sélecteur de dsecendance (espace) cible tous les éléments imbriqués. Le sélecteur d'enfant direct (>) cible uniquement les éléments fils directs.
<article class="projet">
<h3>Titre du projet</h3>
<section>
<p>Description du projet</p>
<div>
<p>Détails supplémentaires</p>
</div>
</section>
</article>
.projet > h3 {
color: #2a9df4;
}
.projet p {
line-height: 1.6;
}
Dans l'exemple ci-dessus, .projet > h3 cible uniquement le titre h3 directement enfant de .projet. .projet p cible tous les paragraphes descendants, y compris ceux dans les sections imbriquées.
Sélecteurs d'intersection et d'union
Le sélecteur d'intersection cible les éléments satisfaisant à la fois plusieurs critères. Le sélecteur d'union cible les éléments satisfaisant à l'un des critères.
/* Intersection : éléments div avec la classe "moderne" */
div.moderne {
font-family: 'Segoe UI', sans-serif;
}
/* Union : éléments avec la classe "principal" ou "secondaire" */
.principal, .secondaire {
padding: 20px;
background-color: #f5f5f5;
}
Sélecteurs de séquence (pseudo-classes d'ordre)
Ciblent des éléments en fonction de leur position parmi leurs frères et sœurs.
<ul class="liste-courses">
<li>Pain</li>
<li>Lait</li>
<li>Œufs</li>
<li>Fromage</li>
</ul>
.liste-courses li:first-child {
color: blue;
}
.liste-courses li:last-child {
color: red;
}
.liste-courses li:nth-child(2) {
font-weight: bold;
}
.liste-courses li:nth-child(even) {
background-color: #eee;
}
.liste-courses li:nth-child(odd) {
background-color: #fafafa;
}
Attention : :nth-child(n) sélectionne d'abord le n-ième enfant du parenet, puis vérifie s'il correspond au sélecteur de balise spécifié. Par exemple, div p:nth-child(2) cible le deuxième enfant d'un div uniquement si cet enfant est un p.
Sélecteur de frère adjacent
Cible l'élément immédiatement suivant un autre.
<h2>Chapitre un</h2>
<p>Paragraphe introductif.</p>
<p>Autre contenu.</p>
h2 + p {
margin-top: 0;
font-style: italic;
}
Pseudo-classes d'interaction
Les pseudo-classes :active et :hover permettent de réagir aux actions de l'utilisateur.
.bouton {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
.bouton:hover {
background-color: #0056b3;
}
.bouton:active {
background-color: #004094;
transform: scale(0.98);
}
L'effet :hover peut également cibler des éléments descendants ou des frères suivants, mais cette utilisation doit être maîtrisée pour éviter des comportements inattendus.
Spécificité des sélecteurs (poids)
En cas de conflit entre plusieurs règles CSS, la spécificité détermine quelle règle s'applique. Les poids des sélecteurs se calculent comme suit :
- Styles en ligne : poids 1000
- Sélecteurs d'identifiant : poids 100
- Sélecteurs de classe, attributs et pseudo-classes : poids 10
- Sélecteurs de balises et pseudo-éléments : poids 1
- Sélecteur universel : poids 0
La déclaration !important surcharge toutes les autres règles, quelle que soit leur spécificité.
/* Exemple de calcul de spécificité */
.panneau {
background-color: white; /* Spécificité : 10 */
}
.panneau.important {
background-color: yellow; /* Spécificité : 20 */
}
#alerte {
background-color: red; /* Spécificité : 100 */
}
.panneau {
background-color: green !important; /* Surcharge toutes les autres */
}
Les sélecteurs combinés additionnent leurs poids. Par exemple, div.conteneur a une spécificité de 11 (1 pour div + 10 pour .conteneur).
Pour les sélecteurs groupés (union), chaque sélecteur est évalué indépendamment. L'ordre des règles dans le code n'importe que lorsque les spécificités sont égales ; dans ce cas, la dernière règle l'emporte.
Exercice d'application
Analysez le code suivant et déterminez le style final appliqué :
<html lang="fr">
<head>
<style>
* { margin: 0; padding: 0; }
.section-principale, .section-secondaire {
background-color: #f0f0f0;
color: #333;
}
.section-principale > span {
color: blue;
font-size: 14px;
}
.section-principale > span:first-child {
color: black;
}
.section-principale p, p {
background-color: #fff3cd;
}
p {
background-color: #cce5ff;
}
div {
font-size: 18px;
}
</style>
</head>
<body>
<div>En-tête</div>
<div class="section-principale">
<span>Texte important</span>
<span>Texte secondaire</span>
<p>Contenu par défaut</p>
</div>
<p>Pied de page</p>
<div class="section-secondaire">Barre latérale</div>
</body>
</html>
Considérez les règles de spécificité et l'ordre de déclaration pour expliquer les styles appliqués à chaque élément.