Syntaxe CSS

1. À quoi sert le CSS

Le CSS est un langage descriptif, comme le HTML. On n’y écrit pas d’instructions à exécuter les unes après les autres : on décrit un résultat, et le navigateur se charge de l’obtenir.

Ce qu’il décrit, c’est la présentation d’une page HTML. En bref, le CSS est responsable :

• de la couleur du texte ;
• des images de fond ;
• de la taille et de la police des caractères ;
• de savoir si le menu est à gauche ou à droite ;
• et de tout ce qui touche à l’apparence.

Surtout, le CSS est indépendant de la page HTML. Le HTML dit ce qu’est le contenu, un titre, un paragraphe, un lien. Le CSS dit à quoi il ressemble. On peut changer toute l’apparence d’un site sans toucher à une seule balise.

2. L’attribut style

Le CSS indique le style à appliquer sur chaque balise HTML. La façon la plus directe de le faire, c’est l’attribut style, écrit sur la balise elle-même.

<h1 style="color: white; background: hotpink;">
    Hello World
</h1>

Ce titre s’affichera en blanc sur fond rose. L’attribut contient deux déclarations, chacune formée d’une propriété, de deux-points, puis d’une valeur. Un point-virgule termine chaque déclaration.

propriété: valeur;

C’est pratique pour un essai rapide, mais on s’en sert peu. Le style se retrouve mélangé au contenu, et il faudrait le recopier sur chaque titre de chaque page.

3. Les sélecteurs

La plupart du temps, on déclare les styles à part, à l’aide d’un sélecteur. Le sélecteur désigne les balises concernées, et les déclarations s’écrivent entre accolades.

h1 {
    color: white;
    background: hotpink;
}

Cette règle s’applique à tous les h1 de la page, d’un coup. Changer la couleur de tous les titres ne demande plus qu’une modification.

Le vocabulaire, à retenir pour se comprendre :

• h1 est le sélecteur ;
• color et background sont des propriétés ;
• white et hotpink sont des valeurs ;
• color: white; est une déclaration ;
• l’ensemble, sélecteur et accolades compris, est une règle.

Ici le sélecteur est un nom de balise, mais il en existe bien d’autres. C’est là que le vocabulaire de famille vu en HTML, parent, enfant, frère, va servir.

4. Où écrire le CSS

Une règle CSS ne s’écrit pas n’importe où dans la page. Elle a deux places possibles, toutes deux dans la balise <head>.

Directement dans une balise <style>.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <style>
        h1 { color: white; background: hotpink; }
    </style>
</head>

Dans un fichier externe, appelé par une balise <link>.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <link rel="stylesheet" href="style.css">
</head>

Le fichier style.css ne contient que du CSS, sans aucune balise. L’attribut rel indique qu’il s’agit d’une feuille de style, et href dit où aller la chercher.

C’est le fichier externe qu’on utilise presque toujours. Toutes les pages du site appellent la même feuille de style, et la modifier change l’apparence du site entier.

5. S’entraîner avec CSS Diner

Les sélecteurs s’apprennent mieux en jouant qu’en lisant. CSS Diner est un jeu où l’on sert des plats en les désignant avec des sélecteurs CSS, de plus en plus précis à chaque niveau.