Une feuille de style CSS, cela contient CSS, qui veut dire Cascading Style Sheet, donc en fait feuille de style en cascade? S'il semble évident qu'un type défini dans une balise s'applique à une balise, il faut savoir maintenant ce que signifie le terme de cascade. En fait, le style défini dans la feuille de style s'applique non seulement à la balise que l'on veut, mais aussi à tous les noeuds fils et à toute la descendance du noeud dont on a défini le style. En d'autres termes, si j'ai <p><b>texte</b> bleu</p>, alors le style qui s'appliquerait à la balise <p> s'applique aussi à la balise <b> fille de <p>. Déjà dans cet exemple, vous voyez que cela est très pratique: nous n'avons pas besoin de définir le style pour les balises <b> si le style standard nous convient outre les modifications apportées sur la balise <p>.

Avec les feuilles de style CSS, on définit en fait pour chaque balise, donc pour chaque type de données, une manière, un style, pour représenter la donnée. Si une balise n'a pas de style particulier, on cherche un style particulier défini pour les balises parentes et on l'applique. Si on n'en trouve pas, on prend le style par défaut.

Cependant, il existe certaines manières de limiter le champ d'application du style à certaines balises et pas à d'autres, alors que ce sont les mêmes. Pour cela, on utilise l'attribut class. Nous avons entrevu dans l'article qui décrivait comment générer les pages web, que le menu était défini dans un paragraphe délimité par une balise <p class="menu">. Nous pouvons, dans la feuille de style, définir un style pour les balises <p> de classe menu et un style pour les autres balises <p>. Voici ce que cela pourrait donner dans notre feuille de style myprog.css que nous utilisons dans l'autre article:

p      { color:blue  }
p.menu { color:green }

Dans ce cas, les deux styles peuvent être appliqués. C'est celui le plus spécifique qui s'applique, donc celui p.menu.

Les classes sont des manières de sélectionner un style. Il en existe un autre qui utilise l'arborescence du HTML.

h1 b { color:red }

Cet exemple permet de n'appliquer le style qui met le texte en rouge, uniquement sur le contenu des balises <b> elles-mêmes contenus de balises <h1>. Ainsi, du texte en gras à l'intérieur d'un paragraphe ne sera pas mis en rouge.

Les feuilles de styles CSS1 définissent encore quelques autres modes de sélection des balises, et CSS2 en rajoute une couche, en particulier en fonction des attributs des balises. Voyez pour cela les spécifications des feuilles de style CSS2.

Si l'on veut non seulement spécifier la couleur, mais aussi la taille de la police de caractères, voici comment faire:

p { color:yellow; font-size: 14pt }

Les espaces étant gérés comme en HTML, c'est-à-dire que peu importe leur nombre et le nombre de retours à la ligne, ce qui suit est une manière équivalente de dire la même chose:

p { 
      color: yellow;
      font-size: 14pt
  }

Je profite de cette similitude sur les espaces avec le HTML pour dire que, tout comme en HTML, le texte de définition d'une feuille de style CSS n'est pas sensible à la casse. Si vous aimez les majuscules, ne vous en privez pas. Un petit rappel pourtant: le XML est lui sensible à la casse, donc méfiance si vous écrivez une feuille de style CSS pour un document XML.

Différentes unités sont disponibles pour définir la taille des polices de caractères, la taille des marges, etc. Nous avons:

On peut aussi donner des pourcentages, comme en HTML, avec le symbole %.