Les feuilles de stylesAutres astuces   Exemple

    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 :

    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 :

    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 :

Création d'un modèle:

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

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

.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].

Les feuilles de style externes.
    Les styles sont définis entre deux balises <STYLE> et </STYLE>.  Dorénavant, les définitions des styles seront toutes stockées dans une même page. Procédez comme suit :
  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.
Les liens.
    Les liens hypertextes peuvent être affichés dans quatre états distincts :

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;
}