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.
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 est localement plus spécifiquement
attribuée ;
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 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 rouge, 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"> </div> doté de
la propriété .spacer { clear: both;
} ;
ou mieux, utiliser un élément
<hr /> doté de la
propriété hr { clear: both;
visibilty: 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 .
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.