Pourquoi utiliser CSS

 

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
Exemple
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.)

Plus de détails
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 <B> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <BODY>.

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"
"http://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
Challenge
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.

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, Fredchat, Verruckt, Mgjbot, Indigo, BenoitL, Gorrk
Dernière mise à jour par : teoli,