Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.
Information : utilité de CSS
CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son style . La séparation du style et du contenu permet :
- D'éviter des duplications
- Une maintenance plus facile
- D'utiliser le même contenu avec différents styles pour différents usages
| Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages.
Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page. Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire. |
En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)
| Un langage de balisage comme HTML fournit également certaines manières de préciser un style.
Par exemple, en HTML, il est possible d'utiliser une balise Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place. |
Action : création d'une feuille de style
Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : style1.css
Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :
strong {color: red;}
Lier votre document à votre feuille de style
Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :
| Cascading Style Sheets |
| En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs.
Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style. |
Pour continuer
Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.
Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : Fonctionnement de CSS.