Cet article explique comment appliquer des styles CSS à vos documents HTML.
| Prérequis : | Il peut être utile de savoir comment écrire une page HTML simple et comment configurer les éléments de base d'un site web. |
|---|---|
| Objectif : | Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web. |
Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.
Voyons comment appeler des informations CSS en utilisant les balises <style> et <link> et analysons ce qui se passe quand les deux balises sont utilisées conjointement.
Pédagogie active
Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.
Aller plus loin
La balise <style>
Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise <style> :
<!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<style>
body {
background:white;
color:blue;
}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Comme nous l'avons déjà souligné, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.
Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.
La balise <link>
La balise <link>
Prenons l'exemple de ce code CSS et plaçons le dans un fichier demo.css :
/* demo.css */
body {
background:white;
color:blue;
}
Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier demo.css grâce à la balise link :
<!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section Comment configurer les éléments de base d'un site web.
Chaque page qui appellera le fichier demo.css via la balise link bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier demo.css autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.
Alternative imparfaite : <style> + @import
A la place de la balise <link>, vous trouverez peut-être parfois cette syntaxe :
<style type="text/css"> @import url(demo.css); </style>
C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <link> pour des raisons de performance (à l'inverse d' @import, la balise <link> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser @import dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.
Utiliser <style> et <link> ensemble
Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise style pouvait être utile si la mise en forme s'applique à un seul document du site.
Dans un premier temps on appelle donc toujours le fichier demo.css, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :
- Comme d'habitude on lie en premier notre feuille de style grâce à la balise
link. - Grâce à la cascade, chaque style s'applique l'un après l'autre.
- Puis avec une balise
style,on annule le texte bleu défini parcolorsur une seule page du site.
Voici le code du fichier demo.css :
/* demo.css */
body {
background:white;
color:blue;
}
On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :
<!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<link rel="stylesheet" href="demo.css">
<style type="text/css">
body {
color:red;
}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <style> (demo.css continue néanmoins de gérer tous les autres styles).
Prochaines étapes
Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :
- Revoir les propriétés CSS et comment s'en servir.
- Perfectionner vos connaissances en design, en commençant par l'accessibilité.