Afficher la version M3cen Afficher la version M3cfr A- Size A+
Créer un site » Tutoriaux » CSS » Qu'est-ce qu'une feuille de style et pourquoi l'utiliser?
Autres sections css

Qu'est-ce qu'une feuille de style et pourquoi l'utiliser?

CSS : les feuilles de style

En règle générale, les pages d'un même site ont toutes la même présentation. Couleurs des titres, couleur de l'arrière plan, couleur du texte et des liens... l'erreur à ne pas commettre est de mettre en forme les pages indépendamment les unes des autres. Nous verrons successivement pourquoi utiliser les feuilles de style css et comment les mettre en place sur votre site.

Avantage des feuilles de style

  • elles vont alléger le code de vos pages... le style (la mise en page) étant défini dans une page spécifique, il peut être appelé par plusieurs pages html, ce qui évite donc de répéter le code dans chacune de vos pages.
  • elles simplifient les modifications ultérieures. Si vous désirez modifier la mise en page, il suffira d'éditer le fichier .css (si le code était répété dans chaque page, il faudrait toutes les modifier ! ).
  • les pages s'affichent plus rapidement. Lorsqu'un internaute visite un site, certains fichiers sont mis en cache (conservés en mémoire dans l'ordinateur), ce qui évite d'avoir à les télécharger à chaque fois. Ainsi si l'internaute visite plusieurs pages de votre site, la page css ne sera chargée qu'une seule fois.

Utiliser les feuilles de style

  Tout d'abord, voyons comment déclarer que nous allons utiliser une feuille de style. Le but recherché est de simplifier les modifications futures. Nous allons donc placer ces données dans un fichier spécifique (ces fichiers portent l'extension .css) que l'on va importer dans chacunes des pages du site. Nous commençons par insérer la ligne ci-dessous dans l'en-tête de la page html.

  1. <html>
  2.   <head>
  3.     <link href="http://www.domaine.com/style.css" type="text/css">
  4.   </head>
  5.   <body>
  6.   </body>
  7. </html>

  Etudions maintenant le contenu de la feuille de style. Le navigateur va importer la feuille de style spécifiée et l'appliquer à notre page HTML. Il faut donc créer un fichier (dans l'exemple, nommé style.css) en utilisant par exemple le bloc-notes de windows. Créez un nouveau fichier texte, collez-y le code ci-dessous puis enregistrez cette feuille avec le nom souhaité (style.css).

  1. <style>
  2. body {
  3.   background-color:#EFEFEF;
  4.   margin:0;
  5.   font-family: Verdana, Arial, Helvetica, sans-serif;
  6.   font-size: 10px;
  7.   color: #000000;
  8. }
  9.  
  10. h1 {
  11.   font-size : 14px;
  12.   font-family : Verdana, Arial, Helvetica, sans-serif;
  13.   color : #000099;
  14. }
  15.  
  16. h2 {
  17.   font-size: 12px;
  18.   font-family: Verdana, Arial, Helvetica, sans-serif;
  19.   color: #990000;
  20. }
  21. </style>

Remarque : pour la couleur, nous utilisons le code de couleur héxadécimal.

  • BODY (corps en Anglais) définit le style du corps de la page. On a ici défini la couleur d'arrière plan (background-color), les marges de la page (0 pixels), la police à utiliser (font-family), la taille du texte (font-size) et la couleur du texte (color).
  • H1 et H2 : en HTML, les balises H1, H2, H3... sont utilisées pour créer des titres et sous titres dans la page. Nous avons donc défini ici le style de ces titres et sous-titres. Les titres H1 seront en bleu (taille 14) et les sous-titres H2 seront en rouge (taille 12).