# Le langage CSS/Premier exemple

* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
[ Modifier le sommaire ]
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.

## 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.
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 :
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 :

## 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.
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 :
Les espaces et retours de ligne n'ont pas d'importance en CSS, on peut donc écrire de même :
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
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 :
    Application : dans un fichier HTML
    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