2.1 Feuilles de style externes
Connecter le CSS (Cascading Style Sheets) à un document HTML permet de styliser les pages web, améliorant leur apparence et leur convivialité. Il existe plusieurs moyens de connecter le CSS à HTML, chacun ayant ses propres avantages et étant adapté à différentes situations.
Méthodes pour connecter le CSS :
- Feuilles de style externes (External Stylesheets)
- Feuilles de style internes (Internal Stylesheets)
- Styles en ligne (Inline Styles)
Feuilles de style externes (External Stylesheets)
Les feuilles de style externes sont des fichiers CSS séparés, qui sont reliés au document HTML avec la balise <link>. Cette méthode permet de séparer les styles de la structure du document, ce qui simplifie la gestion des styles et la réutilisation des fichiers CSS sur plusieurs pages.
Avantages :
- Facilité de gestion des styles
- Réutilisation des styles sur plusieurs pages
- Amélioration du caching et des performances
Syntaxe :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple d'une feuille de style externe</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Titre</h1>
<p>Texte</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple d'une feuille de style externe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre</h1>
<p>Texte</p>
</body>
</html>
Exemple de fichier CSS(styles.css) :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Feuilles de style internes (Internal Stylesheets)
Les feuilles de style internes sont placées à l'intérieur du document HTML lui-même dans la section <head> avec la balise <style>. Cette méthode est pratique lorsque vous devez appliquer des styles à une seule page ou lorsque le fichier externe n'est pas disponible.
Avantages :
- Facilité d'utilisation pour une seule page
- Aucun besoin de fichier supplémentaire
Syntaxe :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple d'une feuille de style interne</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Titre</h1>
<p>Texte</p>
</body>
</html>
2.3 Styles en ligne (Inline Styles)
Les styles en ligne sont appliqués directement aux éléments HTML à l'aide de l'attribut style. Cette méthode est utile pour des tests rapides ou lorsque vous devez changer le style d'un seul élément.
Avantages :
- Application rapide et ciblée des styles
- Adapté aux changements dynamiques via JavaScript
Inconvénients :
- Difficulté à gérer les styles pour un grand nombre d'éléments
- Difficulté à réutiliser les styles
Syntaxe :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de styles en ligne</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Titre</h1>
<p style="color: #666; background-color: #f4f4f4;">Texte</p>
</body>
</html>
Exemple d'utilisation de toutes les méthodes sur une page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de toutes les façons de connecter CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Titre</h1>
<p style="color: #666;">Ce texte est stylisé en utilisant des styles en ligne.</p>
</body>
</html>
2.4 Ordre de priorité des styles
Lorsque les styles sont appliqués de différentes manières, leur priorité est déterminée de cette façon :
- Styles en ligne (Inline Styles) ont la priorité la plus élevée
- Feuilles de style internes (Internal Stylesheets) ont la priorité suivante
- Feuilles de style externes (External Stylesheets) ont la priorité la plus basse
Si plusieurs styles avec la même priorité sont appliqués à un même élément, alors la priorité est déterminée par la spécificité du sélecteur et l'ordre de déclaration.
Exemple de priorité des styles :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de priorité des styles</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Style interne */
}
</style>
</head>
<body>
<p style="color: red;">Ce texte sera rouge à cause de la priorité du style en ligne.</p>
</body>
</html>
GO TO FULL VERSION