Le langage CSS/Structure et syntaxe
Si vous êtes pressé consultez en priorité :
Ce chapitre a pour but de poser les bases de la structure d'une feuille de styles CSS ainsi que les premiers éléments de syntaxe. Nous aborderons également la liaison entre les documents web et les CSS, la propriété de "cascade" des styles et l'adéquation des styles à l'appareil restituant la page web.
Structure générale.
Syntaxe des règles de style.
Une feuille de styles CSS fonctionne sous forme de "déclarations".
Une déclaration est composée au minimum de deux éléments : l'élément de la page auquel on souhaite appliquer un style (le sélecteur), et le groupe de règles définissant le style (propriété et valeur).
Analysons cette déclaration :
Ici, l'élément à mettre en forme est h1 (titre de niveau 1) et le groupe de règles, délimité par les accolades, contient la règle « mettre cet élément en rouge ». Une règle consiste en une propriété (ici "color"), suivie par deux points (:), suivie enfin par la valeur associée à la propriété (ici "rouge").
Il est bien évidemment possible de spécifier plusieurs règles, pour un même élément, en les séparant par des point-virgules (;) de cette façon :
h1 {
 color: red;
 font-weight: bold
On peut aussi spécifier le même jeu de règles pour plusieurs identifiants en les séparant par des virgules (,) :
h1, h2 {
 color: red;
 font-weight: bold
Il faut savoir que les erreurs de syntaxes CSS ont pour effet d'interrompre dans le navigateur web l'interprétation des styles et donc la mise en forme. Contrairement au moteur d'interprétation du code HTML des navigateurs, l'interprétation des CSS par les navigateurs ne corrige habituellement pas d'erreur de syntaxe.
Modularisation des styles.
Il est possible d'importer les styles contenus dans des fichiers de styles différents afin de les organiser de façon modulaire. Parmi les pratiques possibles, on rencontre notamment :
Pour ce faire, on peut notamment utiliser la syntaxe suivante :
 @import "fichier.css";
où "fichier.css" est le nom du fichier contenant les styles à importer. Cette mention doit être spécifiée "au tout début" de la feuille de style, avant d'éventuels styles de la feuille ("déclarations"). Elle doit aussi impérativement comporter un point-virgule (;) final. Elle peut également, si ce n'est pas déjà le cas de la feuille parente où elle se trouve, être complétée par la mention des médias cibles de ces importations.
Remarque : si le chemin du fichier à importer est relatif (pas de barre / devant ni de codice_17), il sera relatif au fichier contenant cette importation. Ici on a donc supposé qu'ils étaient dans le même répertoire.
Utiliser les styles CSS dans une page web.
Dans une page HTML.
NB: l'annexe ../Interface HTML offre une vue synthétique des exemples exposés ci-après.
Déclaration de styles.
Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier HTML à l'aide d'une balise "style". Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :
<html>
 <head>
 <style type="text/css">
 p {
 font-family: Bitstream Vera Sans;
 color: #666;
 line-height: 1.6em;
 </style>
 </head>
 <body>
 <p>
 Exemple de page HTML avec CSS intégrés
 </p>
 </body>
</html>
Les styles CSS ainsi définis ne sont évidemment valides que pour la page en question, on réservera donc en général cette méthode à l'expérimentation ou à des styles propres à une page unique. Pour plus de souplesse, on peut donc transférer le code CSS dans un fichier texte, par exemple "styles.css", et appeler ces styles dans l'entête HTML à l'aide d'une balise "link". Ce fichier CSS peut alors être inclus dans toute page web de cette manière :
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
 <p>
 Exemple de page HTML avec CSS externes
 </p>
 </body>
</html>
Le fichier "styles.css" contient alors simplement :
p {
 font-family: Bitstream Vera Sans;
 color: #666;
 line-height: 1.6em;
Remarque : le chemin des fichiers CSS spécifiés peut être absolu ou relatif. Dans ce deuxième cas, il est relatif au fichier important la feuille de styles, en l'occurrence le document web. Exemple :
On peut alors utiliser une des règles équivalentes suivantes :
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<link rel="stylesheet" type="text/css" href="http://mon.site.org/css/styles.css">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
Pour être exhaustif, signalons qu'il existe une autre méthode pour inclure du code CSS externe. Elle consiste à utiliser la règle CSS codice_20 qui permet d'importer une feuille de style dans un code CSS :
<html>
 <head>
 <style type="text/css">
 @import "styles.css";
 </style>
 </head>
 <body>
 <p>
 Exemple de page HTML avec CSS externes
 </p>
 </body>
</html>
Cette règle permet, via ses variantes syntaxiques, de filtrer les navigateurs de génération 4.x et 5.0, par exemple Netscape 4 et Internet Explorer 5.0 Mac et/ou Windows. Il faut donc l'utiliser en toute connaissance de cause. Son avantage est que l'on peut facilement déclarer plusieurs feuilles de styles à importer sans multiplier les balises HTML.
Adapter les styles au périphérique de sortie.
Le périphérique de sortie de la page web n'est pas forcément l'écran de l'ordinateur. Il peut être également l'imprimante pour faire un tirage papier, un projecteur pour une présentation grand format, ou un navigateur mobile. Les styles définis pour l'écran ne conviennent généralement pas pour d'autres médias. Pour prendre deux exemples fréquents :
Ceci est possible dans les feuilles de styles grâce à la mention du "media" de sortie. On trouvera la liste des média possibles à la page Interface HTML. Il existe à nouveau deux techniques : la mention directement dans la feuille ou la mention à l'importation d'une feuille externe. Dans le premier cas, les styles CSS contiennent un passage de ce type :
@media screen {
 /* règles de styles */
Ceci définit des styles spécifiques à la sortie écran. Dans le second cas, le plus courant, on définit des fichiers séparés par type de media. Il faut alors ajouter la mention du media dans la page web à l'aide d'un attribut de la balise "link" :
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="print.css" media="print" />
 </head>
 <body>
 <p>
 Exemple de page HTML avec CSS intégrés
 </p>
 </body>
</html>
Dans cet exemple, la feuille "styles.css" contient le style destiné à l'affichage à l'écran dans un navigateur courant, et une seconde feuille "print.css" spécifique à l'impression.
Dans un document XML.
On peut importer une feuille de styles CSS dans un fichier XML. Il faut utiliser la règle suivante :
<?xml-stylesheet type="text/css" href="styles.css"?>
L'inconvénient par rapport à l'utilisation d'une feuille de transformation XSL permettant de générer du HTML à partir du XML, est que tous les éléments XML ont la même apparence par défaut. Il faut ainsi redéfinir le style de quasiment chaque élément. Au contraire une transformation en HTML permet d'utiliser les éléments standards du HTML comme les paragraphes, les titres, les listes, etc.
Ordre d'interprétation des styles et cascade.
Cascade de styles.
Dans le cas où plusieurs feuilles de styles sont utilisées dans la même page web, les règles CSS sont construites au fur et à mesure de la lecture de chacune d'entre elles, dans l'ordre mentionné des feuilles de styles. Ainsi si des règles contradictoires apparaissent dans les styles, c'est la dernière règle lue qui prime.
Considérons par exemple les scripts CSS "styles.css" et "couleurs.css" suivants :
/* styles.css */
p {
 color: black;
/* couleurs.css */
p {
 color: gray;
Les textes des paragraphes seront de couleur grise si ces styles sont importés de cette manière :
@import "styles.css";
@import "couleurs.css";
alors qu'ils seraient noir en inversant l'ordre d'importation des feuilles de styles. Il faut donc veiller à ne pas dupliquer des règles dans des fichiers CSS différents sous risque de casse-tête par la suite. L'intérêt de cette spécificité de cascade est que les styles par défaut du navigateur sont toujours écrasés par les styles de la page web, lesquels peuvent à nouveau être écrasés par les styles de l'utilisateur lorsque le navigateur le permet. Ainsi si l'utilisateur visite régulièrement un site écrit trop petit, il peut définir une règle agrandissant la police pour ce site.
Remarques :
Priorité des règles.
Afin d'éviter que le style d'une partie précise du document (par exemple le menu) ne soit facilement modifié par une règle assez générale comme celle du paragraphe précédent, il existe la notion de priorité des règles. Ainsi dans la cascade, une règle apparaissant postérieurement ne peut modifier un style que si sa priorité est égale ou supérieure.
Considérons la feuille de styles suivante dans laquelle nous souhaitons que les titres du menu n'aient pas la même couleur que les titres du texte :
h1, h2, h3 {
 color: darkblue;
div#menu h1 {
 color: navy;
Le code HTML correspondant serait :
<div id="page">
 <h1>Titre de la page</h1>
 <p>...</p>
 </div>
 <div id="menu">
 <h1>Section de menu</h1>
 <ul>
 <li>Entrée de menu 1</li>
 </ul>
 </div>
Nous supposons ici que les éléments du menu sont tous contenus dans un unique bloc parent, un élément "div" d'identifiant "menu". Que se passerait-il si une feuille de styles importée par la suite modifiait à nouveau la couleur des éléments de titre HTML par un « codice_21 » ? Rien !
Ordre des spécificités des règles.
Il est évident dans l'exemple précédent que les titres du menu ne doivent pas être traités comme les autres titres. Aussi, plus le sélecteur d'élément est en quelque sorte "précis" dans sa cible, plus sa priorité est importante. La précision du sélecteur est appelé "spécificité" dans le jargon CSS. L'ordre des spécificités est le suivant, de la moins prioritaire à la plus prioritaire :
Un style de moindre priorité ne peut jamais modifier un style de priorité plus élevée. Il existe cependant un moyen de déroger à cette règle : la mention codice_27. Cette mention s'insère juste derrière une valeur de propriété CSS et indique au navigateur qu'il ne faut pas tenir compte de styles contradictoires par la suite. Elle s'utilise de cette manière :
p {
 color: gray !important;
Calcul de spécificité.
Le calcul de la spécificité d'une règle se fait en allant des éléments les plus spécifiques vers les moins spécifiques. À chaque pas, le décompte du nombre de sélecteurs correspondant à la spécificité indique le niveau de priorité. En effet, il est normal que :
 div#page p em
soit plus spécifique que :
 div#page em
mais moins que :
 div#page p em.rouge</code>
Ainsi lorsque l'on parcourt les différentes spécificités dans l'ordre décroissant, on obtient :
En corollaire, ceci signifie qu'il vaut toujours mieux utiliser le moins possible de sélecteurs pour simplifier l'ajout de règles plus spécifiques. Par exemple dans le code html suivant :
<div id="page">
 <p> ...
 <ul>
 <li> <a>...</li>
 </ul>
 </p>
 </div>
le style des liens "A" doit vraisemblablement être spécifié en partant d'une règle simple comme « codice_32 » plutôt que « codice_33 » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « codice_34 », et ainsi de suite.
Déclaration de variable.
Pour éviter de modifier en masse une valeur utilisée à plusieurs endroits, il est possible de la stocker dans une variable, qui sera appelée avec la fonction codice_35.
Actuellement, on ne peut déclarer que des variables pour les couleurs. Pas pour les tailles, les fontes... 
Exemple :
 --my-super-custom-color: #f6f6f6;
 background-color: var(--my-super-custom-color);
 background-color: var(--my-super-custom-color);