Les feuilles de styles

    Les feuilles de styles ou CSS (Cascading Style Sheet, feuilles de styles en cascade) sont au Web ce que les styles sont aux traitements de texte. Associés à des balises HTML, les styles définissent la façon dont le navigateur présentera les éléments d'une page.

    Lorsque vous appliquez un style à un paragraphe, vous en définissez l'apparence : police de caractères, taille et couleur des caractères, alignement, etc. Vous lui appliquez en fait les paramètres du style tels qu'ils sont définis dans la feuille de styles associée. Vous pouvez par exemple créer un style Titre, un autre Sous-Titre, un autre Texte et un dernier Signature. Le style n'étant défini qu'une fois, vous pouvez vous en servir dans toutes vos pages.

Les avantages sont multiples :

• édition plus simple: plus la peine de répéter toutes les balises HTML de mise en forme pour chaque paragraphe, il suffit de préciser le style qui sera appliqué.
• site homogène: une seule définition de mise en forme par style : vous êtes certain de l'homogénéité graphique de vos pages.
• édition plus souple. Vous pouvez modifier la mise en pages de l'ensemble de votre site en modifiant simplement la définition des styles dans la feuille de styles.

    En outre, les feuilles de style permettent de contrôler davantage l'affichage en gérant les marges, l'interlignage et la justification par exemple. 

    Les CSS utilisent une syntaxe qui leur est propre. Il suffit de créer des styles à la carte. Un style se définit par son nom et ses propriétés et est placé soit dans la page HTML, soit dans un fichier annexe.

    Les styles sont définis entre les balises <STYLE> et </STYLE>. Pour redéfinir le formatage de la balise HTML <H1> :

<STYLE>
    H1    {
       font-size: 24pt;
       font-family: Verdana;
       color: #2288FF;
       font-weight: normal;
       text-align: right
    }
  </STYLE>

    Le style <H1> est ici défini à l'aide de cinq propriétés (font-size, font-family, color, font-weight, text-align) auxquelles ont été affectées les valeurs. Soixante-dix propriétés sont disponibles... chacune disposant de quatre options en moyenne !


    La définition d'un nouveau style nommé titre se réalisera comme la redéfinition du style <H1>, à la différence près que le nom du style sera précédé d'un point :

<STYLE>
    .titre    {
    font-size: 24pt;
    font-family: Verdana;
    color: #2288FF;
    font-weight: normal;
    text-align: right;
    top : 130px;
    right : 100px
    }
  </STYLE>

    Les propriétés permettent de gérer quatre catégories de formats :

• Les fonds de page. Il peut aussi bien s'agir de texte que d'images.
  Exemples : background-color, background-image, background-repeat
• Les cadres. Ces propriétés permettent notamment de modifier les marges, les bordures et surtout les emplacements des éléments de type tableaux ou layers.
  Exemples : margin-top, margin-bottom, margin-left, margin-right, border-width, width, height
• Les polices de caractères. On peut modifier l'apparence d'un paragraphe de texte en lui appliquant une police particulière, avec tous les enrichissements habituels (gras, italique, souligné, etc.).
  Exemples : font-family, font-style, font-weight, line-height
  font-weight désigne l'épaisseur de la police. Celle-ci peut être normale (normal) ou épaisse (bold) ou lighter ou bolder. On peut moduler le caractère en le rendant plus ou moins gras. Une valeur de 900 donne un caractère très gras, une valeur de 100 donne un rendu peu gras (moins gras que la normale).
  font-family désigne le nom de la police à utiliser. On peut spécifier plusieurs noms : le premier disponible sur le système du visiteur de la page sera utilisé.
  font-size définit la taille de la police utilisée, en points. Une taille de 12 points est normale, 26 moyenne et 72 très grande.
• Le texte. On peut définir la couleur du texte, mais également l'espace séparant deux mots, et même deux lettres.
  Exemples : color, text-align, word-spacing, letter-spacing, text-decoration.
  color permet de modifier la couleur du texte. Précédée d'un dièse, la couleur s'exprime en notation hexadécimale.
  text-align permet de préciser l'alignement du texte. Un paragraphe peut être aligné à gauche (left), à droite (right), à gauche et à droite (justify) ou centré (center).
  text-decoration : les liens sont soulignés par défaut. Pour créer des liens non soulignés, on peut utiliser la propriété text-decoration qui accepte une des options suivantes :
  - none : aucune mise en forme particulière
  - underline : soulignement
  - overline surlignement
  - line-through barré
  - blink clignotement (uniquement sous Netscape)

    L'adoption de typographies spécifiques pour les différentes rubriques des  pages fournira de bons points de repère aux lecteurs et leur assurera une lecture confortable. L'observation d'une page Web permet de distinguer cinq typographies distinctes récurrentes sur la quasi-totalité des pages :

• les titres
• les sous-titres
• le texte normal
• les annotations
• les liens
  

• Style Titre :

.Titre { position: absolute;
           left: 100px;
           top: 0px;
           z-index: 2;
           font-size: 36pt;
           font-family: Tahoma;
           font-weight: 900;
           color: #0066DD }

• Style SousTitre :

.SousTitre { position: absolute;
               left: 130px;
               top: 60px;
               z-index: 10;
               font-size: 14pt;
               font-family: Tahoma;
               font-variant: small-caps; }

    Les index de profondeur: Les éléments d'une page (texte comme graphismes) sont à considérer comme des couches superposées. Le fait de pouvoir les placer où on le souhaite implique de se soucier de laquelle sera posée "par-dessus" les autres. C'est le rôle de la propriété z-index. La valeur la plus faible, en l'occurrence 1, est attribuée à la couche la plus prioritaire, celle qui sera posée au-dessus de toutes les autres.

• Style Texte :

.texte {
           font-family: Verdana;
           font-size: 9pt;
           text-align: justify;
           line-height: 14pt;
         }

    Quelles unités pour les tailles ? Les tailles peuvent être exprimées en centimètres [cm], en millimètres [mm], en pixels [px] ou en points [pt].

1. Affichez le code d'une page pourvue de styles.
2. Pour en sauvegarder les styles dans un fichier réutilisable, copiez le code contenu entre les deux balises citées, et collez-les dans un document vierge. Comme pour toutes les modifications de code HMTL, utilisez un éditeur de texte brut, tel que le Bloc-Notes.
3. Enregistrez ensuite ce fichier en tant que feuille de style, c'est-à-dire avec l'extension .css.
4. Supprimez de vos pages toutes les définitions du style (supprimer tout le code compris entre <STYLE> et </STYLE> (ces balises comprises).
5. Revenez dans le code de vos pages et faites appel à la feuille de styles sauvegardée:
   <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
   où style.css est le nom d'enregistrement du fichier feuille de styles à l'étape 3.
   

• normaux (a.link)
• marqués comme visités (a.visited)
• marqués comme activés (a.active)
• pointés par le curseur - sous Internet Explorer uniquement - (a.hover)

Voici des redéfinitions possibles des quatre états cités ci-dessus :

A:link {
font-size: 14px;
font-weight: 600;
font-style: normal;
font-family: "arial", "helvetica";
color: rgb(30,30,100);
text-decoration: none;
}

A:visited {
font-weight: lighter;
font-style: normal;
font-family: "arial", "helvetica";
color: rgb(30,30,100);
text-decoration: none;
}

A:active {
font-weight: 600;
font-style: normal;
font-family: "arial", "helvetica";
color: rgb(255,0,0);
text-decoration: none;
}

A:hover {
font-size: 14px;
font-weight: 700;
font-style: italic;
font-family: "arial", "helvetica";
color: rgb(60,150,200);
text-decoration: none;
}