2003-03-21 2004-01-27 Laurent Denis laurent.denis@openweb.eu.org Cet article est sous licence Creative Commons Attribution-ShareAlike. 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. debutant expert mise_en_page css 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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 .

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

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.

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.

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.

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.

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.

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.

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.

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.

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.