Valid XHTML     Valid CSS2    

Feuilles de style en HTML

Lorsqu'on écrit tout un site et pas seulement une seule page Web, il est bon d'avoir une charte graphique, un "style de page" avec une même mise en forme pour toutes les pages, un même cadrage etc.

Comme avec Microsoft Word il est possible en HTML de définir et d'utiliser des styles et des feuilles de style.

La page http://www.interpc.fr/mapage/billaud/chire-m.htm dont le code source est ici et sa feuille de styles externe http://www.interpc.fr/mapage/billaud/chire-m.css sont un bel exemple de mise en forme typographique que l'on peut réaliser avec une feuille de style.

Le mot style se dit style en anglais, le mot feuille se dit sheet et comme les styles sont définis en "cascade", on parle de feuilles de styles en cascade, ce qui aboutit aux initiales CSS.

Les styles sont
soit internes,
définis par la balise <style> dans la partie <head> du document,
soit externes,
définis dans un fichier dont l'extension est CSS.

1. Voici un exemple de style interne : 


    <style type="text/css"><!--
       .cadre  { border: thin solid; margin-left: 30p;
                 background-color: #EEEEEE; margin-right: 80p; }
       .grouge { font-weight : bold ; color: #990000 ; }
       .gbleu  { font-weight : bold ; color: blue ;    }
       .gvert  { font-weight : bold ; color: #008800 ; }
       .it     { font-style  : italic }
    --></style>

Pour utiliser un style interne, il suffit d'utiliser la balise <span> avec l'attribut class.

Par exemple pour utiliser le style interne "gvert" on pourra écrire 


   On y distingue plusieurs catégories de vin rouge.
2. Pour utiliser un style externe, il faut commencer par indiquer le fichier des styles (la "feuille") à l'aide de la balise <link>. Par exemple si le fichier des styles est mesformats.css, il faut mettre dans la partie <head> du document : 

     <link rel="stylesheet" type="text/css" href="mesformats.css">

Dans une telle feuille de style, on peut [re]définir attributs des balises classiques comme <a href=>... et <tr>...

Voici par exemple le début du fichier mesformats.css 



     BODY {
      background: white;
      color: black;
      font-size: 10pt;
      margin: 0px;
      border: none;
      padding-top: 0px;
      padding-right: 10px;
      padding-bottom: 0px;
      padding-left: 10px;
     }

     H2 {
      font-size: 12pt;
      color: #3333ff;
     }

     H3 {
      font-size: 11pt;
      color: #009900;
     }

     address {
      font-size: 8pt;
     }

     P {
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12pt;
      line-height: 1.0;
     }

     UL {
      list-style-position: outside;
      list-style-type: disc;
     }

     LI {
      padding: 2px;
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 8pt;
      line-height: 1.0;
     }

Vous pouvez vérifier ici ce que cela donne comme document.

3. Il est possible d'utiliser à la fois des styles internes et des styles externes dans un même document. Mieux : on peut, avec la norme CSS 2.0 utiliser plusieurs feuilles de styles différentes suivant qu'on destine le document à l'écran, à l'imprimante...

4. Signalons aussi qu'il existe d'autres façons plus techniques de définir des styles avec DSSSL (Document Style Semantics and Specification Language) et XSL (Extensible Stylesheet Language).

Pour plus de référence, on pourra consulter le site très complet et en français

http://fr.selfhtml.org/

 

 

retour gH    Retour à la page principale de   (gH)