HTML - Feuille de style
Types de feuilles de style
Il existe trois types de feuilles de style en HTML : les feuilles de style internes, les feuilles de style externes et les styles en ligne. Chaque type présente ses propres avantages et inconvénients, et le choix dépend des besoins spécifiques du site web.
Feuille de style interne
Une feuille de style interne est définie dans la section <head> d'un document HTML à l'aide de la balise <style>. Elle permet d'appliquer des styles à plusieurs éléments au sein d'une seule page HTML. Le principal avantage d'une feuille de style interne est qu'elle maintient les styles spécifiques à cette page, facilitant ainsi la gestion et la compréhension. Cependant, si vous avez plusieurs pages nécessitant les mêmes styles, vous devrez dupliquer la feuille de style interne dans chaque page, ce qui peut devenir difficile à maintenir.
Conseil: Feuille de style interne
<!DOCTYPE html>
<html>
<head>
<title>Exemple de feuille de style interne</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Bienvenue sur mon site web</h1>
<p>Ceci est un exemple de feuille de style interne.</p>
</body>
</html>Feuille de style externe
Une feuille de style externe est un fichier CSS séparé qui contient les styles d'un site web. Elle est liée au document HTML à l'aide de la balise <link> dans la section <head>. Le principal avantage d'une feuille de style externe est qu'elle permet d'appliquer les mêmes styles sur plusieurs pages, facilitant ainsi le maintien d'une apparence cohérente sur l'ensemble du site. De plus, comme les styles sont dans un fichier séparé, cela peut améliorer la vitesse de chargement du site. L'inconvénient est qu'une requête HTTP supplémentaire est nécessaire pour obtenir le fichier CSS externe.
Conseil: Feuille de style externe
<!DOCTYPE html>
<html>
<head>
<title>Exemple de feuille de style externe</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Bienvenue sur mon site web</h1>
<p>Ceci est un exemple de feuille de style externe.</p>
</body>
</html>Styles en ligne
Les styles en ligne sont appliqués directement à un élément HTML à l'aide de l'attribut style. Ils remplacent tous les styles définis dans les feuilles de style internes ou externes. Le principal avantage des styles en ligne est qu'ils permettent d'appliquer rapidement des styles à un élément spécifique. Cependant, les styles en ligne mélangent le contenu et la présentation, rendant le code HTML plus difficile à lire et à maintenir. De plus, si vous devez appliquer le même style à plusieurs éléments, vous devrez dupliquer le style en ligne pour chaque élément.
Conseil: Styles en ligne
<!DOCTYPE html>
<html>
<head>
<title>Exemple de styles en ligne</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">Bienvenue sur mon site web</h1>
<p style="font-size: 16px; line-height: 1.5;">Ceci est un exemple de styles en ligne.</p>
</body>
</html>Liaison de feuilles de style externes
Pour lier une feuille de style externe à un document HTML, vous devez utiliser la balise <link> dans la section <head> de votre fichier HTML. La balise <link> comporte plusieurs attributs que vous devez spécifier :
| Attribut | Description |
|---|---|
rel |
Spécifie la relation entre le document HTML et le fichier lié. Pour lier une feuille de style, la valeur doit être "stylesheet". |
type |
Spécifie le type du fichier lié. Pour un fichier CSS, la valeur doit être "text/css". |
href |
Spécifie l'URL ou le chemin du fichier de la feuille de style externe. |
Conseil: Exemple de liaison d'une feuille de style externe
<!DOCTYPE html>
<html>
<head>
<title>Exemple de liaison d'une feuille de style externe</title>
<link rel="stylesheet" type="text/css" href="chemin/vers/styles.css">
</head>
<body>
<h1>Bienvenue sur mon site web</h1>
<p>Ceci est un exemple de liaison d'une feuille de style externe.</p>
</body>
</html>Dans l'exemple ci-dessus, la balise <link> est placée dans la section <head>. L'attribut rel est défini sur "stylesheet", indiquant que le fichier lié est une feuille de style. L'attribut type est défini sur "text/css", spécifiant que le fichier lié est un fichier CSS. L'attribut href contient le chemin du fichier CSS externe, qui est "chemin/vers/styles.css" dans cet exemple. Vous devez remplacer ceci par le chemin réel de votre fichier CSS.
Le chemin du fichier peut être spécifié de différentes manières :
- Chemin relatif : Si le fichier CSS se trouve dans le même répertoire que le fichier HTML, vous pouvez simplement spécifier le nom du fichier (par exemple,
"styles.css"). Si le fichier CSS est dans un sous-répertoire, vous devez inclure le chemin du répertoire (par exemple,"css/styles.css"). - Chemin absolu : Vous pouvez spécifier l'URL complète du fichier CSS, y compris le nom de domaine (par exemple,
"https://example.com/css/styles.css"). Ceci est utile lorsque vous liez une feuille de style hébergée sur un domaine différent.
Il est important de s'assurer que le chemin du fichier est correct, sinon les styles ne seront pas appliqués à votre document HTML.
En liant une feuille de style externe, vous pouvez garder vos styles séparés de votre contenu HTML, rendant votre code plus facile à maintenir et réutilisable. Vous pouvez lier la même feuille de style à plusieurs pages HTML, assurant ainsi une apparence cohérente sur l'ensemble de votre site web.