Chargement...

Syntaxe CSS

Vous savez déjà que CSS met en forme le HTML. Dans cette séance, nous regardons de près la grammaire d'une règle, pour que vous puissiez lire et écrire des styles sans deviner où placer les accolades, les deux-points et les points-virgules.

Qu'est-ce que la syntaxe CSS ?

La syntaxe CSS est le schéma fixe qui sert à écrire une règle de style. Presque toutes les règles du quotidien ont la même forme : vous choisissez ce que vous voulez mettre en forme (le sélecteur), vous ouvrez un bloc de déclarations avec {, vous écrivez une ou plusieurs déclarations, puis vous fermez avec }. Chaque déclaration associe une propriété à une valeur.

Anatomie d'une règle CSS

Décomposez la règle en éléments nommés. Une fois que vous savez nommer chaque morceau, repérer une faute de frappe devient bien plus simple.

📊 Les éléments d'une règle CSS

Élément Exemple Rôle
Sélecteur p Désigne les éléments auxquels la règle s'applique
Bloc de déclarations { … } Regroupe une ou plusieurs déclarations entre accolades
Déclaration color: teal; Une instruction propriété–valeur, qui se termine généralement par ;
Propriété color L'aspect que l'on veut modifier
Valeur teal Le réglage attribué à cette propriété
Deux-points / point-virgule : / ; Les deux-points séparent la propriété de la valeur ; le point-virgule termine la plupart des déclarations

Une règle annotée

Voici une règle minimale où chaque élément important est visible. Nous approfondirons les sélecteurs dans les séances suivantes ; ici, l'objectif est de bien maîtriser la structure.

Règle CSS annotée

css
CSS Code 
p {
color: teal;
}

À lire de gauche à droite

  • p — le sélecteur (tous les paragraphes)
  • { … } — le bloc de déclarations
  • color — la propriété
  • : — sépare la propriété de la valeur
  • teal — la valeur
  • ; — termine la déclaration
    Les espaces et les retours à la ligne sont libres. Vous pourriez écrire p{color:teal;} sur une seule ligne : le navigateur l'interprète exactement de la même façon. Pour apprendre comme pour travailler en équipe, mieux vaut toutefois la forme lisible sur plusieurs lignes.

Plusieurs déclarations dans un même bloc

Une règle peut définir de nombreuses propriétés pour le même sélecteur. Écrivez chaque déclaration sur sa propre ligne et terminez-la par un point-virgule.

Plusieurs déclarations

css
CSS Code 
.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}

Pourquoi ça marche

  • .note est un sélecteur de classe (vous vous exercerez davantage aux classes plus tard)
  • Quatre déclarations partagent un même bloc de déclarations
  • Le navigateur les applique toutes aux éléments portant class="note"
  • Un point-virgule oublié entre deux déclarations peut empêcher la propriété suivante de s'appliquer

Regrouper des sélecteurs

Quand plusieurs sélecteurs doivent recevoir les mêmes styles, séparez-les par des virgules. Un seul bloc de déclarations suffit pour tous.

Sélecteurs regroupés

css
CSS Code 
h1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}

Quand regrouper

Le regroupement évite les copier-coller quand des titres (ou d'autres éléments) doivent avoir la même apparence. Si un sélecteur a besoin d'un style particulier plus tard, donnez-lui sa propre règle plutôt que de surcharger le groupe.

Aide-mémoire de la ponctuation

Gardez cette courte liste en tête pendant que vous écrivez :

  • Les accolades entourent le bloc de déclarations
  • Les deux-points se placent entre la propriété et la valeur
  • Le point-virgule termine chaque déclaration (indispensable avant la suivante ; c'est aussi une bonne habitude après la dernière)
  • Les virgules séparent les sélecteurs regroupés, pas les propriétés
  • Les noms de propriétés et la plupart des valeurs à mot-clé ne sont pas sensibles à la casse, mais l'usage est de les écrire en minuscules

À vous de jouer

  1. Créez syntax.html avec un paragraphe <p class="note">Syntax practice</p> et un bloc <style> dans le head.
  2. Ajoutez la règle .note à plusieurs déclarations vue dans cette séance.
  3. Remplacez background-color par #fef3c7, enregistrez, puis actualisez la page.
  4. Ajoutez une cinquième déclaration, font-size: 1.125rem;, dans le même bloc, enregistrez et actualisez à nouveau.
  5. Vérifiez que le fond et la taille de police changent bien tous les deux. Sinon, contrôlez vos accolades et vos points-virgules.

Erreurs courantes

  • Écrire color teal sans les deux-points : le navigateur ne peut pas interpréter la déclaration
  • Oublier { ou }, si bien que les déclarations se retrouvent hors du bloc et sont ignorées
  • Omettre le point-virgule entre deux déclarations, ce qui empêche la seconde propriété de s'appliquer
  • Mettre une virgule entre la propriété et la valeur (color, teal) au lieu des deux-points
  • Laisser une propriété seule, sans sélecteur ni accolades : ce n'est pas une règle complète

Résumé

  • Syntaxe CSS = sélecteur + bloc de déclarations { } contenant des déclarations
  • Une déclaration s'écrit property: value;
  • Un bloc peut contenir de nombreuses déclarations pour le même sélecteur
  • Les virgules regroupent les sélecteurs qui partagent les mêmes styles
  • Soigner les accolades, les deux-points et les points-virgules évite les erreurs silencieuses
  • Exercez-vous en modifiant des valeurs et en ajoutant des déclarations, puis actualisez la page

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel