Le langage CSS/Structure et syntaxe

Premier exemple

Les sélecteurs

Le langage CSS

Introduction
- Premier exemple
- Structure et syntaxe
- Les sélecteurs
- Valeurs et unités utilisées
Mise en forme
Mise en page
Pour aller plus loin
Annexes

Version imprimable

[ Modifier le sommaire ]

Premier exemple

Les sélecteurs

Si vous êtes pressé consultez en priorité :

Règles syntaxiques de base
Structure générale
Déclarations de styles

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.

Règles syntaxiques de base

Casse: Les feuilles de styles CSS ne sont pas sensibles à la casse : elles ne tiennent pas compte des majuscules et minuscules. Exception faite pour les éléments n'obéissant pas directement aux règles de syntaxe CSS, notamment les attributs id et class (dont le nommage est assuré par le rédacteur : vous), les noms des polices de caractères (exemple : "Trebuchet MS"), et les suffixes d'URL ne répondant pas à ces règles.

Mise en forme du code: Les feuilles de styles CSS ne tiennent pas compte des espaces et retours à la ligne.

Identifiants: Les identifiants (nom, id et class) ne peuvent contenir que des caractères A-Z, a-z, 0-9 plus le tiret (-) et le caractère de soulignement (_). Il ne peuvent pas commencer par un nombre.

Chaînes de caractère

Les chaînes de caractères affichables (par exemple pour les pseudo-éléments :before et :after, ou pour la propriété quote) sont entre des guillemets simples « ' » (« apostrophe ») ou doubles « " ».

Pour mettre un guillemet simple ou double dans la chaîne affichable, on fait précéder le caractère d'une barre de fraction inversée, respectivement « \' » et « \" ».
Pour mettre un retour de ligne, on utilise le caractère « \000a » (ou « \a ») ; si l'on veut revenir à la ligne dans le code, on place une barre de fraction inversée seule en fin de ligne.
En absence de la définition du jeu de caractères (charset), elles ne peuvent contenir que des caractères ASCII ; les caractères Unicode sont obtenus en mettant le code hexadécimal précédé d'une barre de fraction inversée, par exemple « \00a0 » pour une espace insécable, « \0152 » pour « œ » (on peut ignorer les zéros de tête)… Une feuille incluse dans un fichier HTML (entre les balises <style>…</style>) utilise le même jeu de caractères que la page HTML. Si la feuille de style est dans un fichier à part, on définit la feuille de code par la règle @charset (par exemple @charset "ISO-8859-1";).

Commentaires: Les commentaires commencent par une barre de fraction suivie d'un astérique « /* », et se concluent par la succession de caractères inverse « */ ». Ils sont facultatifs, voire inutiles, pour les modifications mineures d'affichage (inutile d'indiquer que l'on souligne, cela se lit facilement), mais indispensables pour les mises en pages importantes (inscrire par exemple la taille minimale d'une marge pour avoir la place d'insérer le menu permet de ne pas commettre de maladresse lors d'une future modification du fichier).

Structure générale

Syntaxe des règles de style

Une feuille de styles CSS fonctionne sous forme de déclarations.

selecteur { propriété:valeur; }

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 :

h1 { color: red }

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
}

Astuce

La dernière règle du groupe ne comporte pas obligatoirement de point-virgule terminal. Toutefois le mettre systématiquement évite de l'oublier. Pour la maintenance, cela permet de déplacer une propriété plus haut ou d'ajouter d'autres propriétés à la fin sans avoir à penser à ajouter le point-virgule manquant.

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 :

la scission des styles relatifs à la mise en page, c'est-à-dire le placement des éléments de la page, et des styles relatifs à la typographie (couleurs, bordures, polices, etc.).
la cascade d'une feuille globale pour un groupe de pages et d'une feuille spécifique à la page concernée (voire une cascade plus complexe prenant en compte les styles par rubriques de pages)

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 http://), 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 Le langage CSS/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 :

la page web est http://mon.site.org/index.html
la feuille de styles est http://mon.site.org/css/styles.css

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 @import 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 :

le menu latéral de gauche : est-il vraiment utile à l'impression ? Généralement non, il faudrait donc le faire disparaître dans ce cas.
la disposition en colonne : est-elle appropriée à un écran réduit tel que celui d'un mobile ? Dans ce cas, il convient d'opter pour une présentation linéaire.

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 :

toutes les méthodes de déclaration des CSS interviennent dans la cascade lorsqu'elles sont mélangées dans la même page HTML
la cascade ne s'applique que lorsque c'est exactement le même sélecteur qui est employé ou, bien sûr, un sélecteur de priorité supérieure (lire la suite).

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 « h1 {color: black} » ? 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 :

élément HTML, par exemple « h1 {color: black} » (vaut 1 point de priorité).
imbrication d'éléments, par exemple « div h1 {color: black} » (vaut 2 points de priorité, un par élément présent dans le sélecteur)
utilisation d'une classe, par exemple « h1.noir {color: black} » (vaut 11 points de priorité : 1 pour l'élément, 10 pour la classe)
utilisation d'un identifiant, par exemple « h1#nom-du-site {color: black} » (vaut 101 points de priorité : 1 pour l'élément, 100 pour l'identifiant)
style dans la balise HTML, par exemple « <h1 style="color: black">...</h1> » (vaut 1000 points de priorité)

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 !important. 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

Ainsi lorsque l'on parcourt les différentes spécificités dans l'ordre décroissant, on obtient :

« div#page » qui met tout le monde à égalité
« em.rouge » qui indique que la dernière règle est prioritaire
« p em » qui place la première en priorité 2
« em » qui place la deuxième en dernière priorité

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 « div#page a » plutôt que « div#page p ul li a » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « div#page li a », 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 var().

Actuellement, on ne peut déclarer que des variables pour les couleurs. Pas pour les tailles, les fontes,...

Exemple :

:root {
  --my-super-custom-color: #f6f6f6;
}


#page1 {
  background-color: var(--my-super-custom-color);
}

#page2 {
  background-color: var(--my-super-custom-color);
}