Vous souhaitez vous affranchir du html détourné à des fins de présentation ? Abandonner les balises obsolètes ? Séparer strictement forme et contenu ? Les feuilles de style CSS2 sont un outil à la fois puissant et souple d'usage. En voici le vocabulaire élémentaire.

Appliquer un style

À tous les éléments de la page

• le sélecteur universel * agit sur tous les éléments HTML. Pour définir par exemple une couleur rouge par défaut : * { color: #ff0000; } ;

  les éléments susceptibles d'avoir une couleur d'avant-plan, comme les paragraphes de texte, les titres, les bordures… seront rouges, sauf si une autre couleur leur est spécifiquement attribuée ;

• pour en savoir plus : le sélecteur universel.

À toutes les instances d'un élément

• pour que le texte des paragraphes soit par exemple en bleu :p { color: #0000ff; } ;

  le contenu de toutes les balises <p> sera bleu, sauf si une autre couleur leur attribuéee par ailleurs de façon plus spécifique ;

• pour en savoir plus : les sélecteurs de type.

À certaines instances d'un élément

• pour que le texte de certains paragraphes seulement soit par exemple en vert, on définit la classe .vert : p.vert { color: #008000; } ;

  le contenu de toutes les balises <p class="vert"> sera vert. Le contenu des balises <p> restera bleu ;

• pour en savoir plus : les sélecteurs de classe.

À une instance unique d'un élément

• pour que le texte d'un paragraphe précis soit par exemple en vert, on définit l'id #vert : p#vert { color: #008000; } ;

  le contenu de la seule balise <p id="vert"> sera vert. Le contenu des autres balises <p> restera bleu ;

• pour en savoir plus : les sélecteurs d'id.

À un ensemble d'éléments successifs

• pour que le texte d'un titre et des paragraphes qui le suivent soient gris, on définit la classe .gris : .gris { color: #808080; } ;

  ce style s'appliquera aux éléments bornés par l'élément div :

  <div class="gris">
    <h1>…</h1>
    <p>…</p>
  
    <p>…</p>
  </div>
            

  ou définis par :

  <h1 class="gris">…</h1>
  
  <p class="gris">…</p>
  <p class="gris">…</p>
            

• pour en savoir plus : the div element.

À une partie de contenu de paragraphe

• pour que certains mots d'un paragraphe soient gris, on applique la classe .gris à l'élément span :

  <p>…
    <span class="gris">
      ceci sera en gris
    </span>
    …
  </p>
            

• pour en savoir plus : the span element.

À un élément directement ou indirectement contenu dans un autre élément

• pour que le contenu de l'élément em soit en rouge seulement dans les titres h3, on définit la règle : h3 em { color: #ff0000;} ;

  qui s'appliquera aussi bien à :

  <h3>…
    <em>en rouge</em>
    …
  </h3>
            

  qu'à :

  <h3>
    …
    <code><em>…</em></code>
    …
  
  </h3>
            

• pour en savoir plus : les sélecteurs descendants.

À un élément directement contenu dans un autre élément

• pour que le contenu de l'élément em soit en rouge dans un paragraphe, sauf dans les citations qu'il contient, on écrira : p>em { color: #ff0000;} ;

  qui s'appliquera à :

  <p>…
    <em>en rouge</em>
  
    …
  </p>
             

  mais pas à :

  <p>
    <q><em>…</em></q>
  
  </p>
            

• pour en savoir plus : les sélecteurs d'enfant.

À un élément suivant un autre élément

• pour que le paragraphe suivant une image soit rouge, on écrira :img + p { color: #ff0000;} ;

  qui s'appliquera à :

  <img>…</img>
  <p>en rouge</p>
  
            

  mais pas à :

  <h3>…</h3>
  <p>…</p>
            

• pour en savoir plus : les sélecteurs d'enfants adjacents.

À différents éléments simultanément

• pour que les titres de tous niveaux soient rouges, on écrira : h1,h3,h3,h4,h5,h6 { color: #ff0000;} ;
• pour en savoir plus : le regroupement.

Couleurs, bordures et arrières-plans

Les couleurs sont spécifiées à l'aide des Mots-clé HTML ou du modèle de couleur RGB .

Couleur et image d'arrière-plan

• pour que l'arrière-plan d'un élément soit blanc : background-color: #ffffff; ;
• pour qu'une image occupe l'arrière-plan d'un élément : background-image: url("…url de l'image…") ;
• pour que l'image d'arrière-plan ne se répète pas dans l'élément : background-repeat: no-repeat; ;
• pour que l'image d'arrière-plan soit centrée dans l'élément : background-position: center; ;
• pour en savoir plus : les propriétés d'arrière-plan .

Couleur d'avant-plan

• pour que l'avant-plan d'un élément soit noir : color: #000000; ;
• pour en savoir plus : la couleur d'avant-plan.

Bordures

• pour que l'élément ait une bordure noir et continue de 5 pixels d'épaisseur : border: 5px solid #000000; ;
• pour que la bordure soit en pointillé : border: 5px dotted #0000ff; ;
• pour que la bordure donne une impression de relief : border: 5px groove #0000ff; ;
• pour en savoir plus : les propriétés de bordure.

Taille, alignement et positionnement

Largeurs, hauteurs

• pour spécifier la largeur d'un élément (ici 250px) : width: 250px; ;
• pour spécifier la hauteur d'un élément (ici 250px) : height: 250px; ;
• pour en savoir plus : la largeur du contenu et la hauteur du contenu.

Marges, espacement

• pour spécifier la largeur d'une marge autour d'un élément (ici 25px) : margin: 25px; ;
• pour spécifier la largeur de l'espacement autour d'un élément (ici 25px) : padding: 25px; ;
• pour en savoir plus : exemples de marges, d'espacements et de bordures.

Alignement du texte

• pour centrer un texte : text-align: center; ;
• pour aligner un texte à gauche : text-align: left; ;
• pour aligner un texte à droite : text-align: right; ;
• pour en savoir plus : l'alignement.

Positionnement des éléments:

• pour centrer horizontalement un élément dans la page (ici avec une largeur de 70% de celle-ci) : margin-left: 15%; margin-right: 15%; ;
• pour extraire un élément du flux normal et le positionner à gauche : float: left; ;
• pour extraire un élément du flux normal et le positionner à droite : float: right; ;

• pour empêcher un élément flottant de déborder vers le bas sur le contenu qui le suit :

  • le faire suivre d'un élément <div class="spacer">&nbsp;</div> doté de la propriété .spacer { clear: both; } ;
  • ou mieux, utiliser un élément <hr /> doté de la propriété hr { clear: both; visibility: hidden; }Il ne sera visible que dans les navigateurs non-graphiques pour lesquels il contribuera à structurer visuellement la page, la rendant plus accessible et plus agréable à consulter… ;

  pour en savoir plus : les flottants et Le contrôle du flux autour des flottants ;

• pour extraire un élément du flux normal et le positionner de manière absolue dans la fenêtre du navigateur (ici, à 25 px des bords haut et droit) : position: absolute; right: 25px; top: 25px; ;

• pour extraire un élément fixed du flux normal et le positionner de manière fixe dans la fenêtre du navigateur (ici, à 25 px des bords haut et droit) : .fixed { position: absolute; right: 25px; top: 25px; } html>body .fixed { position: fixed; } ;

  remarque : le sélecteur html>body permet de cacher la position fixe à MSIE Windows, qui ne la supporte pas, et qui s'en tiendra à un positionnement absolu ;

• pour en savoir plus : la propriété position.

Typographie

• pour spécifier une police de caractères (ici type arial) : font-family: arial, verdana, helvetica, sans-serif; ;

  remarque : les noms de police composés doivent être placé entre guillemets: "Times New Roman" ;

• pour spécifier une taille de caractères (ici 1em) : font-size: 1em; ;

  remarque : les tailles en em sont préférables aux tailles en pixels car elles s'adaptent aux réglages personnels des utilisateurs et sont ainsi plus accessibles… ;

• pour spécifier une hauteur de ligne (ici 1.5em) : line-height: 1.5em; ;
• pour spécifier une mise en italique : font-style: italic; ;

• pour spécifier une mise en gras : font-weight: bold; ;

  pour en savoir plus : La spécification de police ;

• pour spécifier un soulignement : text-decoration: underline; ;

  pour en savoir plus : la propriété text-decoration ;

• pour barrer un texte : text-decoration: line-through; ;

  pour en savoir plus : la propriété text-decoration ;

• pour forcer l'affichage du texte en capitales : text-transform: uppercase; ;

  pour en savoir plus : la capitalisation.

Formats d'hyperliens

• pour définir la couleur par défaut des hyperliens (ici, bleu) : a { color: #0000ff; } ;
• pour définir des hyperliens non soulignés : a { text-decoration: none; } ;
• pour définir la couleur des hyperliens visités (ici, violet) : a:visited { color: #800080; } ;
• pour définir la couleur des hyperliens survolés (ici, violet) : a:hover { color: #800080; } ;
• pour définir la couleur des hyperliens activés (ici, violet) : a:active { color: #800080; } ;
• pour en savoir plus : les pseudo-classes dynamiques.

Commenter son code

• Les commentaire insérés dans une feuille de style doivent être délimités par les caractères "/*" et "*/" :

  /* Ceci est un commentaire */
  body {
  margin: 1em;
  /* Ceci est un autre commentaire */
  }
          

• pour en savoir plus : les commentaires.

Valider son code

Le validateur CSS du W3C vérifie la conformité de votre feuille de style à la spécification CSS1 ou CSS2.

Un autre validateur CSS gratuit (et anglophone) est disponible sur le site du Web Design Group.