La vraie puissance du langage CSS réside dans la combinaison de sélecteurs pour l'application des règles de style. Il est ainsi possible d'affecter un style particulier à un élément suivant le contexte, c'est-à-dire suivant l'imbrication de l'élément au sein d'un autre élément spécifique. Dans le même ordre d'idées, il est permis d'appliquer un style à plusieurs éléments à la fois, en groupant les sélecteurs correspondants.

Sélecteurs contextuels
Ils correspondent à la première possibilité. Prenons l'exemple suivant:

B I {color: blue}

alors un élément en italique sera coloré en bleu uniquement si cet élément est lui-même situé au sein d'un élément en gras. On écrira:

<B>Texte<I> en gras italique bleu</I></B>
<I>Texte en italique de la couleur par défaut</I>

Cette technique permet d'affiner encore le niveau de précision de la feuille de style.

Héritage
Remarquons que si nous avions défini un style pour l'élément B, mais pas pour l'élément I, alors tout texte en italique inséré entre des balises <B> et </B> aurait hérité du style correspondant au texte en gras (avec en plus la propriété d'être en italique). Définir un style particulier pour l'élément I résout le problème, mais ce style s'appliquera également à tous les textes en italique qui ne sont pas situés entre des balises <B> et </B>, ce qui peut ne pas correspondre à ce que l'on désire. La solution optimale est ici d'utiliser un sélecteur contextuel.

Groupement de sélecteurs
Définir un style pour un ensemble de sélecteurs (groupe) s'effectue de la manière suivante (notez les virgules séparant les sélecteurs):

B, I, H1 {color: blue}

Cet exemple nous permet de préciser que le texte contenu dans les balises <B>/</B>, <I>/</I> et <H1>/</H1> devra être affiché en bleu. Ceci appelle trois remarques:

- premièrement, l'indication de couleur n'enlève en rien les propriétés "gras","italique", et "premier niveau de titre" propres aux éléments correspondants;
- deuxièmement, si l'on désire définir avec plus de précision le style de, par exemple, H1, il est possible de redéclarer dans la feuille de style ce sélecteur:

H1 {font-weight: bold; font-family: Verdana}

Alors le texte contenu entre les balises <H1> et </H1> sera en gras, dans la police Verdana, et coloré en bleu;
- troisièmement, les indications de style pour un groupe de sélecteurs peuvent évidemment être bien plus détaillées que dans l'exemple donné, et l'intérêt du groupement apparaît alors: réduire la taille du code des pages web (et la peine du développeur !)

Feuilles de style "en cascade"
Nous venons de voir que l'on pouvait redéclarer un sélécteur auquel nous avions déjà attribué un style. Cette redéclaration permet d'affecter des propriétés supplémentaires au style voulu. Nous avons également pris conscience du mécanisme d'héritage, par lequel certaines propriétés peuvent être transmises en cas d'imbrication des éléments. Ces deux règles se fondent dans un mécanisme supérieur: le mécanisme de cascade. Ce dernier permet de déterminer quelles règles sont à appliquer à un élément. Il fonctionne ainsi:
Si aucune règle n'a été définie pour l'élément, alors sont déterminées les propriétés de style qui peuvent être héritées. A noter que toutes les propriétés ne peuvent pas être héritées: pour ces dernières, le langage CSS procurera des valeurs par défaut. S'il est possible d'hériter de la propriété, alors les règles appliquées à l'élément englobant, s'il en existe, sont transmises à l'élément inclus. Ce processus se poursuit (en recherchant des éléments toujours plus englobant) jusqu'à ce qu'une règle applicable soit trouvée. L'avantage de ce système de fonctionnement est, par exemple, de spécifier la famille de polices pour tous les éléments de la section BODY et ce par une unique règle qui s'appliquerait à l'élément BODY lui-même. Le code ainsi produit s'avère donc très compact.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius