Une règle CSS

HTML dit ce que sont les éléments ; CSS dit à quoi ils ressemblent.

La forme d'une règle

p {
    color: blue;
    font-size: 18px;
}

p est le sélecteur : la règle s'applique à tous les paragraphes.
Entre les accolades, des déclarations : une propriété, deux-points, une valeur, un point-virgule.

Trois sélecteurs de base

p        { ... }   /* tous les éléments <p>                       */
.alerte  { ... }   /* tous les éléments qui ont class="alerte"    */
#bandeau { ... }   /* l'unique élément qui a id="bandeau"         */

Une classe se réutilise sur autant d'éléments que voulu, et un élément peut en porter plusieurs (class="alerte importante"). Un identifiant est unique dans la page. En pratique, on stylise presque tout avec des classes.

Relier la feuille à la page

Dans un vrai site, la feuille de style est un fichier chargé par le <head> :

<link rel="stylesheet" href="style.css">

Dans les exercices, ta feuille est appliquée à la page de l'exercice, et l'aperçu montre le résultat au fur et à mesure.

Une faute ne fait pas d'erreur

Une propriété mal orthographiée (colour, colr) ou une valeur invalide est ignorée en silence par le navigateur : la règle semble simplement ne rien faire. C'est la première chose à vérifier quand un style « ne marche pas ».

Les commentaires s'écrivent /* ainsi */.

2 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

Première règle facile lecon a valider
Classes et identifiants facile lecon a valider