Appliquer une feuille de style

Voyons à présent comment écrire une feuille de style. Une feuille de styles s'appliquant à un document html, il faut d'abord être au point avec cette première syntaxe. Voyons un petit exemple d'html sur lequel sera basé notre feuille de styles.

<h3>coucou</h3>
<div class="c1">
  jaune
  <div id="id1">centré</div>
  <div id="id2">vert</div>
  <div>bleu</div>
  <h3>hello</h3>
</div>
<h3 class="c2">coucou c2</h3>

Quelques explications sont peut etre necessaires. Nous avons d'abord un titre au format h3. Ensuite nous avons une section de class c1 qui inclus trois sections dont une qui a l'ID id1. L'attribut class permet de définir une classe d'appartenance de l'objet, il sera généralement utilisé pour un ensemble d'objets. L'attribut ID permet de définir une feuille de style pour un objet bien précis, vous l'utiliserez ci vous n'avez qu'un ou deux éléments qui ont une representation spécifique.

A cela s'ajoute la notion d'arborescence, dans l'exemple ci-dessus, on peut dire que id1 est l'attribut d'un objet situé sous un objet de classe c1. Dans une feuille de style on pourra faire la différence entre un objet d'id id1 selon qu'il sera situé dans une section c1 ou pas.

Assez de théorie, ecrivons une feuille de style qui corresponde à notre document :

<style>
div h3  { color: red; }
h3      { text-decoration: underline; font-size: 10pt;}
.c1     { color: yellow; background: green; font-weight: bolder;}
#id1    { text-align: center; }
.c1 #id2 { color: green; background: white; }
.c1 div { color: blue; }
h3.c2   { background: yellow; }
</style>

Cet exemple est trés complet et propose toutes les combinaisons que vous pouvez avoir sur une feuille de styles. Commencez par utiliser la première déclaration toute simple, et ensuite quand vous serez bloqués, revennez vers l'exemple pour voir tout ce que vous propose les Cascading Style Sheet.