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 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 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 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 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 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 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 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 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>
h1,h3,h3,h4,h5,h6 { color: #ff0000;} ;
Les couleurs sont spécifiées à l'aide des Mots-clé HTML ou du modèle de couleur RGB .
background-color: #ffffff; ;
background-image: url("…url de l'image…") ;
background-repeat: no-repeat; ;
background-position: center; ;
color: #000000; ;
border: 5px solid #000000; ;
border: 5px dotted #0000ff; ;
border: 5px groove #0000ff; ;
width: 250px; ;
height: 250px; ;
margin: 25px; ;
padding: 25px; ;
text-align: center; ;
text-align: left; ;
text-align: right; ;
margin-left: 15%;
margin-right: 15%; ;
float: left; ;
float: right; ;
pour empêcher un élément flottant de déborder vers le bas sur le contenu qui le suit :
<div class="spacer"> </div> doté de la propriété .spacer { clear: both; } ;<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 ;
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 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… ;
line-height: 1.5em; ;
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.
a { color: #0000ff; } ;
a { text-decoration: none; } ;
a:visited { color: #800080; } ;
a:hover { color: #800080; } ;
a:active { color: #800080; } ;
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 */
}
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.