Passer aux feuilles de style

Openweb.eu.org > Articles  > Passer aux feuilles de style

Abstract

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.

Article

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.

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur :
  • Publié le :
  • Mise à jour : 22 mai 2008
  • 2 commentaires

Vos commentaires

  • Salve34 Le 26 août 2011 à 13:31

    Merci pour cet excellent résumé.
    J’ai particulièrement aimé certaines astuces.

  • Xavier Le 7 décembre 2011 à 19:12

    Merci pour ce travail qui m’incite à passer enfin aux nouvelles normes de codage !

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom