Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.
| Prérequis : | Vous devriez au préalable savoir comment créer un document HTML simple. |
|---|---|
| Objectifs : | Apprendre comment appliquer une mise en forme CSS à un document HTML. |
À propos de CSS
Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). CSS permet de contrôler l'aspect visuel d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.
Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec notre guide CSS.
Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.
Référencer une feuille de style externe
Une feuille de style est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément <link> :
<link href="styles/style.css" rel="stylesheet">
Il vous suffit de modifier l'URL de l'attribut href pour que celui-ci pointe vers votre feuille de style. L'attribut rel="stylesheet" et sa valeur sont nécessaires car l'élément <link> peut être utilisé dans d'autres cas. Tous les éléments <link> doivent être placés au sein de l'élément <head> du document.
Intégrer du CSS avec <style>
L'élément <style> permet d'écrire du CSS directement au sein du document HTML :
<style>
body {
background-color: pink;
}
</style>
Note : N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.
Écrire du CSS inline avec l'attribut style
Enfin, vous pouvez utiliser l'attribut style dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :
<span style="color: red;">Non, tout mais pas ça !</span>
Attention : Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).