Passer aux feuilles de style

Profil : Débutant, Expert
Technologie : CSS
Thème : Mise en page
Auteur : Laurent Denis
Mise à jour : 22/05/2008

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

2 Messages de forum

Passer aux feuilles de style 26 août 2011 13:31, par Salve34

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

Répondre à ce message
Passer aux feuilles de style 7 décembre 2011 19:12, par Xavier

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

Répondre à ce message

Répondre à cet article

Consultez ce site selon votre profil.

Technologie

Thème

Ressources

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par yterium (depuis 2010) et par l'APINC (2002-2010) . Propulsé par SPIP.