HTML - Citations
Types de feuilles de style
Il existe trois principaux types de feuilles de style utilisés dans le développement web : 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 comprendre quand utiliser chacun d'eux est essentiel pour créer des sites web bien structurés et faciles à maintenir.
Feuille de style interne
Une feuille de style interne est définie dans la balise <style> dans la section <head> d'un document HTML. Elle contient des règles CSS qui s'appliquent aux éléments de cette page spécifique. Les feuilles de style internes sont utiles lorsque vous avez une seule page avec des styles uniques ou lorsque vous souhaitez tester rapidement des styles sans créer un fichier CSS séparé.
| Avantages | Inconvénients |
|---|---|
| Les styles sont conservés dans le document HTML, ce qui facilite la gestion des sites web d'une seule page. | Les styles ne peuvent pas être réutilisés sur plusieurs pages, ce qui entraîne une duplication du code. |
| Aucune requête HTTP supplémentaire n'est nécessaire pour récupérer les styles. | Le mélange de HTML et de CSS peut rendre le code plus difficile à lire et à maintenir. |
Conseil: Exemple de feuille de style interne
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>Feuille de style externe
Une feuille de style externe est un fichier CSS séparé qui contient des styles pour une ou plusieurs pages HTML. Elle est liée au document HTML à l'aide de la balise <link> dans la section <head>. Les feuilles de style externes sont la méthode la plus courante et préférée pour appliquer des styles à un site web, car elles permettent la réutilisation du code, une maintenance plus facile et une séparation des préoccupations.
| Avantages | Inconvénients |
|---|---|
| Les styles peuvent être réutilisés sur plusieurs pages, réduisant la duplication du code. | Une requête HTTP supplémentaire est nécessaire pour récupérer le fichier CSS externe. |
| La séparation du HTML et du CSS rend le code plus lisible et facile à maintenir. | Si le fichier CSS externe ne se charge pas, le site web peut apparaître sans style. |
| Les styles peuvent être mis en cache par le navigateur, améliorant les temps de chargement des pages. |
Conseil: Exemple de feuille de style externe
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Styles en ligne
Les styles en ligne sont appliqués directement à un élément HTML en utilisant l'attribut style. Ils ont la plus haute spécificité et remplacent les styles définis dans les feuilles de style internes ou externes. Les styles en ligne doivent être utilisés avec parcimonie, car ils mélangent HTML et CSS, rendant le code plus difficile à lire et à maintenir.
| Avantages | Inconvénients |
|---|---|
| Utile pour appliquer rapidement des styles à un seul élément. | Le mélange de HTML et de CSS rend le code plus difficile à lire et à maintenir. |
| Spécificité la plus élevée, remplaçant les autres styles. | Les styles ne peuvent pas être réutilisés, ce qui entraîne une duplication du code. |
| Plus difficile d'appliquer des styles cohérents sur l'ensemble d'un site web. |
Conseil: Exemple de styles en ligne
<p style="color: red; font-weight: bold;">Ceci est un paragraphe avec des styles en ligne.</p>Liaison de feuilles de style externes
Pour utiliser une feuille de style externe dans votre document HTML, vous devez la lier à l'aide de la balise <link> dans la section <head> de votre fichier HTML. La balise <link> est un élément vide, ce qui signifie qu'elle n'a pas de balise de fermeture, et elle nécessite plusieurs attributs pour connecter correctement la feuille de style au document.
L'attribut rel spécifie la relation entre le document HTML et la ressource liée. Pour lier une feuille de style, la valeur doit être définie sur "stylesheet". L'attribut type indique le type de contenu lié, qui dans ce cas est "text/css". L'attribut href spécifie le chemin du fichier vers le fichier CSS externe.
Conseil: Liaison d'une feuille de style externe dans le même répertoire
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Si le fichier CSS se trouve dans un répertoire différent, vous devez spécifier le chemin de fichier approprié dans l'attribut href. Par exemple, si le fichier CSS se trouve dans un sous-répertoire nommé "css", le code ressemblerait à ceci :
Conseil: Liaison d'une feuille de style externe dans un sous-répertoire
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>Vous pouvez également lier des feuilles de style hébergées sur des sites web externes en fournissant l'URL complète dans l'attribut href :
Conseil: Liaison d'une feuille de style externe à partir d'une URL
<head>
<link rel="stylesheet" type="text/css" href="https://example.com/styles.css">
</head>Vous pouvez lier plusieurs feuilles de style externes à un seul document HTML en incluant plusieurs balises <link> dans la section <head>. L'ordre dans lequel elles sont liées est important, car les styles définis dans les feuilles de style ultérieures remplaceront ceux des feuilles précédentes s'ils ciblent les mêmes éléments.