Liste des Tutoriaux



Passer aux feuilles de style

En bref

Vous utilisiez les balises HTML de présentation ? Pour tirer parti des avantages offerts par les standards, découvrez le vocabulaire élémentaire des feuilles de style.

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.


Une question, une remarque ? Écrivez à l'auteur à laurent.denis@openweb.eu.org.





Liste des Tutoriaux

Pour vous accompagner dans l'utilisation de vos kits graphiques, Kitgrafik a sélectionné sur le web d'excellents tutoriaux qui abordent les sujets essentiels. Les tutoriaux sont classés par niveau d'expertise et restent sous le copyright de leur auteurs respectifs, que nous remercions. Pour vous perfectionner et découvrir de nouvelles techniques, nous vous recommandons chaudement cette liste RSS de tutoriaux. Nous cherchons en permanence les meilleurs sites de design et nous concentrons leurs derniers tutoriaux ici : 40 superbes tutoriaux du web (RSS) -- New --

Autres ressources

  1. 40 superbes tutoriaux du web (RSS) -- New --
  2. http://normandlamoureux.com/cours/xhtml
  3. http://www.mammouthland.net
  4. http://fr.selfhtml.org/
  5. http:/fr.html.net/tutorials/css/
  6. http://pompage.net/pompe/listes/