Le langage CSS/Premier exemple

Nous allons commencer par vous présenter un exemple simple de feuille de style et un fichier HTML l'exploitant. Ce petit didacticiel permettra d'introduire les notions et le vocabulaire de base.

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 ]

Introduction

Structure et syntaxe

Fichier HTML

Ce fichier HTML sera l'application de notre feuille de style. Enregistrez-le, par exemple sous le nom didacticiel-css.html, et affichez-le dans le navigateur. Regardez son apparence avant la création de la feuille de style.

 
<!DOCTYPE html>

<html lang="fr" xml:lang="fr">

  <head>

  <title>Didacticiel pour le CSS</title>

  <meta
    http-equiv="content-type"
    content="text/html; charset=UTF-8" />

  <link rel= "stylesheet" 
    type = "text/css"   
    href="essai.css" /> <!-- Inclusion de la feuille de style externe -->

  </head>

  <body>

    <div id="menu"> <!-- Menu -->
      <ul>
        <li><a href="#1">Premier point</a></li>
        <li><a href="#2">Deuxième point</a></li>
        <li><a href="#3">Troisième point</a></li>
      </ul>
    </div>

<!-- Corps du texte -->

    <p>
      Ceci est un fichier <abbr title="Hypertext Markup Language">HTML</abbr>
      utilisant une feuille de style.
    </p>

    <h1><a name="1">Premier point</a></h1>

    <p>
      L'objet de ce fichier est de fournir
      un support au didacticiel <abbr title="Cascading Style Sheets">CSS</abbr>.
    </p>

    <p class="navigation">
      | <a href="#menu">menu</a> |
    </p>

    <h1><a name="2">Deuxième point</a></h1>

    <p>
      Outre mesure, ce fichier ne présente strictement
      <em>aucun</em> intérêt.
    </p>

    <p class="navigation">
      | <a href="#menu">menu</a> |
    </p>

    <h1><a name="3">Troisième point</a></h1>

    <p>
      Nous vous souhaitons une bonne journée.
    </p>

    <p class="navigation">
      | <a href="#menu">menu</a> |
    </p>

  </body>

</html>

En l'absence de feuille de style, le navigateur devrait l'afficher comme suit.

Premier point
Deuxième point
Troisième point

Ceci est un fichier HTML utilisant une feuille de style.

Premier point

L'objet de ce fichier est de fournir un support au didacticiel CSS.

| menu |

Deuxième point

Outre mesure, ce fichier ne présente strictement aucun intérêt.

| menu |

Troisième point

Nous vous souhaitons une bonne journée.

| menu |

Balises spécifiques

Par rapport à l'HTML sans feuille de style, on remarque :

la balise de l'en-tête <link rel= "stylesheet" …> qui indique où trouver la feuille de style (qui n'existe pas encore) ;
des références à des styles : <div id="menu">, <p class="navigation"> (les styles « menu » et « navigation » sont décrits dans la feuille de style) ;
qu'il y a des liens vers l'ancre #menu alors que l'on ne l'a pas définie explicitement par un <a name="menu">…</a> ; c'est l'attribut id="menu" qui joue le rôle de déclaration d'ancre.

Ceci est la syntaxe recommandée, mais au lieu de regrouper les styles dans un fichier .css il est aussi techniquement possible de :

Les inclure dans le fichier HTML, dans une balise : <style type="text/css">...</style> ;
Les inclure dans chaque balise (à la place des références "id" et "class"), dans un attribut "style". Exemple : <div style="...">...</div>.

Arbre du document

On peut construire l'arbre du document : chaque élément, c'est-à-dire portion du code comprise entre deux balises, se voit appliquer une mise en forme qui est soit la mise en forme par défaut, soit la mise en forme déclarée dans la feuille de style. Une balise est imbriquée dans une autre balise (elles sont toutes imbriquées dans la balise <body>…</body>) ; si l'on représente ces imbrications sous la forme d'une arborescence, on voit qu'un élément a un seul parent (est inclus dans une seule balise, qui elle-même peut être incluse dans…).

L'arbre du document est donc ici :

                     *
       ______________|________________
      |        |        |             |  
div id="menu"  h1      _p_    p class="navigation"
      |        |      |   |           |
      ul       a    abbr  em          a
      |
      li
      |
      a

L'astérisque « * » (la « racine » de l'arbre) désigne le document en entier.

Remarquez que nous n'avons considéré ici que le contenu des balises <body>…</body>, puisque c'est ce qui va être influencé par la mise en forme. Au sens strict, l'arbre du document devrait commencer par :

                                   html
                   _________________|__________________
                  |                                    |
                 body                                 head
      ____________|____________                 _______|______
      |        |   |          |                |       |      |
div id="menu"  h1  p  p class="navigation"   title    meta   link
     …         …   …          …                …       …       …

Fichier CSS

Copiez le code suivant dans un éditeur de texte (voir la section Avec quoi écrire un document HTML ? du wikilivre sur le HTML) et enregistrez-le dans le fichier essai.css. Ce fichier doit se trouver dans le même répertoire que le fichier HTML ci-dessus.

/* Déclaration 1 : jeu de caractères utilisable */

@charset "UTF-8"; /* ISO Latin-1 */

/* Déclaration 2 : style du menu */

div#menu {
  float:left;                      /* objet flottant à gauche (le reste du texte en fait le tour) */
  width: 10em;                     /* largeur : dix cadratins */
  margin: 0.5em; /* marge de 1/2 cadratin de chaque côté */
  background-color: #f0f8fc;       /* fond bleu clair */
  border: solid blue 2px           /* bordure bleue de 2 pixels tout le tour */
}

/* Déclaration 3 : style de abbr */

abbr {
  border-bottom: dotted red 1px /* bordure de 1 pixel en pointillé en-dessous */
}

/* Déclaration 4 : style de navigation */

p.navigation {
  border-top: solid gray 1px /* bordure grise de 1 pixel au dessus */
}

Une fois enregistré, mettez à jour l'affichage de la page HTML dans le navigateur, et regardez la différence.

Les portion de code comprises entre les chaînes /*…*/ sont des commentaires qui ne sont pas interprétés.

L'exemple devrait ressembler à ce qui suit.

Premier point
Deuxième point
Troisième point

Ceci est un fichier HTML utilisant une feuille de style.

Premier point

L'objet de ce fichier est de fournir un support au didacticiel CSS.

| menu |

Deuxième point

Outre mesure, ce fichier ne présente strictement aucun intérêt.

| menu |

Troisième point

Nous vous souhaitons une bonne journée.

| menu |

Si les modifications du fichier CSS ne sont pas prises en compte, c'est qu'il contient une erreur de syntaxe.

Dans ce cas, vérifier les messages d'erreur ou d'avertissement du navigateur dans la console de développement ou de débogage, ou les erreurs générées par le compilateur selon le cas.

Déclarations, règles, sélecteurs et attributs

Le fichier CSS ci-dessus est constitué de quatre déclarations. Une déclaration est de la forme :

sélecteur { règle-1; règle-2;… }

Les espaces et retours de ligne n'ont pas d'importance en CSS, on peut donc écrire de même :

sélecteur {
  règle-1;
  règle-2;
  …
}

La première déclaration, celle définissant le jeu de caractères disponibles dans le fichier CSS, n'obéit pas à cette syntaxe. On parle de « pseudo-règle ».

Le sélecteur est ce qui désigne l'élément du fichier HTML auquel s'applique la déclaration. Par exemple :

le sélecteur abbr désigne tous les éléments abbr du fichier HTML (abréviations, comprises entre les balises <abbr>…</abbr>) ;
le sélecteur p — qui n'est pas utilisé ici — désigne tous les éléments p du fichier HTML (paragraphes, compris entre les balises <p>…</p>) ;
le sélecteur p.navigation désigne les éléments p de classe « navigation » (paragraphes ouverts par une balise <p class="navigation">) ; on peut ainsi définir plusieurs types de paragraphes ;
le sélecteur div#menu désigne l'élément dont l'identifiant est « menu » (groupe d'éléments compris entre les balises <div id="menu">…</div>) ; cet identificateur est unique dans un fichier HTML, on ne doit pas l'utiliser sur plusieurs éléments de cette manière.

On note que les éléments abbr disposent déjà d'une mise en forme par défaut, et que l'on redéfinit celle-ci. À l'inverse, les éléments de classe « navigation » ou d'identifiant « menu » sont spécifique à ce fichier HTML.

La description de la mise en forme est comprise entre une accolade ouvrante « { » et une accolade fermante « } ». Elle est constituée d'une série de règles.

Chaque règle est de la forme attribut : valeur ; :

attribut est un mot-clef désignant la propriété à modifier ;
les deux-points « : » séparent l'attribut de la valeur qui lui est affectée ;
un point-virgule « ; » sépare les règles.

Les attributs que l'on a utilisés ici sont des attributs de boîte : l'objet (le texte ici) est compris dans une boîte, qui peut être invisible (cas général) ou être visible (cas du menu) :

float signifie que l'objet va être calé à un endroit de la page, et que les autres objets (ici le texte) contournent la boîte, l'objet est dit « flottant » ; la règle « float: left » crée un objet flottant calé à gauche ;
width désigne la largeur de la boîte ; la valeur utilisée ici, 10em, se compose d'un nombre (10) et d'une unité (em, qui désigne le cadratin c'est-à-dire la largeur de la lettre « M », et varie donc selon la police utilisée). Elle peut aussi être définie en %, en px, ou à "auto" pour s'adapter à son conteneur. Par contre, pour adapter la boite à ton contenu, ne pas utiliser cet attribut mais display: inline-block ;
margin désigne la marge (le blanc) laissé entre la boîte et les objets alentours ; on indique successivement la marge en haut, à droite, en bas et à gauche (elles sont ici toutes identiques) ;
background-color désigne la couleur du fond (pour le codage, voir les articles de Wikipédia Rouge vert bleu et Codage informatique des couleurs) ;
border désigne la bordure ;
les valeurs solid blue 2px (de la déclaration de div#menu) indiquent un trait continu (solid) de couleur bleue (blue) et de deux pixels d'épaisseur (2px) ;
border-bottom désigne uniquement la bordure du bas (cela produit une sorte de soulignement, mais le « vrai » soulignement est obtenu autrement, voir ci-après) ; les valeurs « dotted red 1px » indiquent un trait en pointillés (dotted) de couleur rouge (red) et d'un pixel d'épaisseur (1px) ;
border-top désigne uniquement la bordure du haut ; les valeurs « solid gray 1px » indiquent un trait continu (solid) de couleur grise (gray) et d'un pixel d'épaisseur (1px).

Imaginons que l'on veuille redéfinir le formatage des éléments em (texte en emphase, compris entre les balises <em>…</em>), pour avoir du texte souligné au lieu d'en italique. On aurait écrit une déclaration

em {
  font-style: normal;        /* pas d'italique */
  text-decoration: underline /* soulignement */
}

Ajoutez cette ligne au fichier CSS, enregistrez-le et mettez à jour l'affichage de la page HTML pour voir l'effet.

Priorités, cascade et sélecteurs

Comme indiqué, les éléments sont imbriqués les uns dans les autres. Chaque élément fils hérite des propriétés de son parent (l'élément dans lequel il est imbriqué), et ses propriétés propres s'y substituent. Les styles s'appliquent donc en cascade (d'où le nom de CSS, cascading style sheets).

La définition du sélecteur est donc capitale : c'est elle qui indique dans quelles conditions un style s'applique ou pas. Ceci est largement évoqué dans le chapitre Les sélecteurs, voici toutefois quelques considérations de base.

Élément seul: Si le sélecteur est simplement le nom de l'élément (« p », « em », « abbr »…), ils s'applique à tous les éléments concernés, sauf cas plus précis.

Élément et classe: Si le nom de l'élément est suivi d'un point et du nom d'une classe (par exemple « p.navigation »), il ne s'applique qu'aux éléments de la classe du style (<p class="navigation">…</p>).

Classe seule: Si le sélecteur ne se compose que du point et du nom de la classe (par exemple « .navigation ») il s'applique alors à tous les éléments de cette classe (<p class="navigation">…</p>, mais aussi <h1 class="navigation">…</h1>, <ul class="navigation">…</ul>…).

Élément et identifiant: De même, un sélecteur « #menu » s'appliquerait à l'unique élément ayant l'identifiant menu du fichier HTML, quel qu'il soit (<p id="menu>…</p>, mais aussi <h1 id="menu">…</h1>, <ul id="menu">…</ul>…) tandis que « div#menu » impose que l'élément soit de type div (donc <div id="menu">…</div>).

Éléments imbriqués: On peut aussi construire un sélecteur à partir de deux autres sélecteurs, séparés d'un signe supérieur « > », ou simplement d'un espace. Le sélecteur « sélecteur-1 > sélecteur-2 » ne s'applique que pour les éléments désignés par sélecteur-2 dont le père est un élément désigné par sélecteur-1. Par exemple, « q > em » désigne un élément contenu dans des balises em et q imbriquées comme suit : <q>…<em>…</em>…</q> — ainsi, si par exemple une citation est en italiques (avec une déclaration du type q {font-style: italic; …}) une mise en emphase dans cette citation sera en lettres romaines (avec une déclaration du type q > em {font-style: normal; …}), comme c'est la norme en typographie française.

Exemple: Lorsque trois citations sont imbriquées, la troisième est en italiques, et l'emphase est alors en lettre droites. On a donc :

q {quotes: '\00ab\00a0' '\00a0\00bb'} /* guillemets français et espace insécable : s'applique à tous */
q > q > q {font-style: italic}        /* 3e niveau en italiques */
q > q > q > em {font-style: normal}   /* emphase en lettre droites */

Application : dans un fichier HTML

<p>
  <q> premier niveau, l'<em>emphase</em> est classique, puis 
    <q> deuxième niveau, et
      <q> troisième niveau <em>avec emphase</em> au milieu.
  </q></q></q>
</p>

ce qui donne

« premier niveau, l'emphase est classique, puis « deuxième niveau, et « troisième niveau avec emphase au milieu. » » »

Voir aussi

Les styles par défaut du W3C :
- Chocolate,
- Midnight,
- Modernist,
- Oldstyle,
- Steely,
- Swiss,
- Traditional,
- Ultramarine.

Comment déboguer ses CSS :
- Firefox/Outils aux développeurs