Une feuille de style externe définit l'apparence d'une page Web. Vous pouvez utiliser une feuille de style pour spécifier des éléments tels que la taille, la couleur et la police du texte, la couleur des boutons ou la position des menus et des barres latérales.
Code utilisé dans une feuille de style externe
Il existe deux types de code utilisés pour créer une page Web de base:
- Langage Signalétique Hyper Text (HTML): Définit le contenu d'une page Web. Il contient le texte réel avec un balisage identifiant si les sections de texte sont des paragraphes, des titres ou des listes. Il contient également des liens vers des images qui apparaissent sur la page et des hyperliens vers des pages externes.
- Feuilles de style en cascade (CSS): Un langage de codage utilisé pour spécifier comment le contenu est affiché. Il définit comment chaque type d'élément de texte est affiché et peut afficher le même type d'élément différemment s'ils appartiennent à des classes différentes ou ont un identifiant différent. Cela permet à des éléments tels que les menus et les listes de se comporter très différemment dans le texte principal d'une page Web.
En général, séparer le style du contenu est une bonne idée, car cela vous permet de vous concentrer sur une chose à la fois. Cela devient encore plus important dans une équipe, permettant aux spécialistes du contenu et de la présentation de travailler indépendamment des autres. Peut-être plus important encore, il permet également à un seul ensemble d'instructions de style d'être appliqué uniformément sur l'ensemble d'un site Web.
La présentation visuelle du site Web peut ensuite être modifiée à partir d'une seule feuille de style sans modifier chaque page Web individuellement. Pour les sites Web complexes plus grands, un certain nombre de feuilles de style peuvent être utilisées pour contrôler le texte, les menus et les divisions au sein des pages. Cette collection de feuilles de style peut être appelée un « thème ».
Utiliser un CSS externe pour lier HTML à CSS
Il est possible d'inclure le style CSS directement dans le code HTML d'une page Web, en utilisant CSS pour styliser individuellement chaque paragraphe et titre différemment. Ce type de style en ligne n'est généralement pas une bonne idée, car vous perdez tous les avantages de séparer le style du contenu. Plus particulièrement, vous perdez la possibilité de mettre à jour l'ensemble de votre site Web de manière cohérente à partir d'un seul fichier.
La bonne façon d'appliquer un style à un site Web est de créer un seul fichier de feuille de style externe pour chaque type de style que vous souhaitez appliquer, puis de référencer ces fichiers à partir de chaque fichier HTML. Par exemple, vous pouvez avoir les feuilles de style externes suivantes:
- texte.css
- menus.css
- layout.css
Vous pouvez apporter des modifications au code CSS dans ces feuilles de style externes sans changer leur les noms de fichiers, c'est-à-dire les références à ces fichiers, dans le code HTML de toutes vos pages Web, ne seront pas modifié.
Exemples de HTML et CSS
Une page HTML très simple pourrait contenir le code suivant:
Tout sur moi!
Cette page parle de moi et pourquoi je suis génial.
Si vous voulez voir à quoi cela ressemble dans un navigateur Web, copiez le texte dans un éditeur de texte comme Bloc-notes. Enregistrez le fichier sous quelque chose comme "index.html" et faites-le glisser dans votre navigateur pour voir le style à l'ancienne.
Une simple feuille de style externe peut être liée à cette page en ajoutant le code suivant sous le fichier.
type = "texte/css"
href = "monStyle.css" />
Créez un autre fichier texte appelé myStyle.css, situé dans le même dossier que index.html qui contient le code suivant:
h1 {
couleur: #FF7643 ;
police de caractères: Arial'
}
p {
La couleur rouge;
taille de la police: 1,5 em ;
}
Vous pouvez faire beaucoup plus avec CSS. Si vous voulez en savoir plus, Écoles W3 est un excellent endroit pour commencer.