On a vu qu'il faut séparer la forme et le fond d'un document XHTML. On va maintenant voir comment relier la forme et le fond : comment utiliser les styles pour mettre en page un document XHTML
Une feuille de style ne contient qu'une suite de règles CSS, voyons à quoi elles ressemblent.
Exemple tiré de la feuille de style de ce site :
/* Par defaut */
body {
background-color:#DBF9F0;
color:black;
font-family:"Arial", sans-serif;
padding:0;
margin:10px 10px 100px 10px;
font-size:0.8em;
}
/*Titres*/
h1#header {
position:absolute;
left:0;
top:0;
background-position:top left;
background-color:transparent;
background-image:url("images/banniere.gif");
background-repeat:no-repeat;
height:150px;
width:100%;
padding:95px 60px 0 20px;
margin:0;
text-align:left;
font-size:1.2em;
font-style:oblique;
}Un style est composé de 3 parties :
Une des notions importantes concernant les CSS est la notion d'heritage : lorsqu'on définit un style pour une entité, celui ci se transmet aux enfants.
De plus, si on définit 2 fois une propriété CSS, c'est celle qui sera rencontrée en dernier qui prendra effet.
Exemple :
html {
font-family:Arial;
}
h2 {
font-family:Helvetica;
}
Dans cet exemple, tous les textes de la page seront représentés avec la police Arial, sauf les titres de niveau 2. Pas besoin de spécifier la police pour toutes les balises qu'on utilise
Attention : toutes les propriétés s'héritent sauf les propriétés de bloc : margin, padding, width, height, position, ....
La technique à utiliser le plus souvent est l'inclusion de feuille externe : elle permet de régler l'apparence du site à un seul endroit. De plus cette feuille sera mise en cache du navigateur des utilisateurs et ne sera pas rechargée par la suite : gain de bande passante.
Le meilleur moyen est d'insérer les lignes suivantes dans la partie head du document :
<style type="text/css">
@import url('style.css');
</style>Tecchnique à utiliser le moins possible : pour des styles spécifiques à une page. On perd presque tous les avantages à utiliser CSS
Il faut inclure les règles CSS entre les deux balises suivantes, dans le head
Exemple :
<style type="text/css">
p {
color:black;
background-color:white;
}
</style>A utiliser avec lencore plus de parcimonie que pour la technique précédente : on perd encore des avantages à utiliser les CSS
Exemple :
<p style="color:black;background-color:white">Mon paragraphe</p>On n'utilise pas les selecteurs ici vu que le style s'applique uniquement à la balise en question
Créer une feuille de style que vous placez à la racine de votre site. Incluez ensuite cette feuille de style externe dans votre document XHTML.
Créer une règle définissant une couleur de texte (noire) et une couleur de fond (blanche) pour tout votre document
Utilisez le selecteur de balise body, les propriétés color et background-color
Vous venez d'inclure votre première feuille de style
Le résultat pour la page XHTML
Le résultat pour la feuille de style
Je vous l'accorde il n'y a pas de différence, mais on n'a rien spécifié de différent à ce que le navigateur fait par défaut.