Comprendre la syntaxe des feuilles de style

Auteur: Jérôme Forget. Publié le 5 février 2007.

Afin de mieux comprendre les règles de syntaxe des feuilles de style CSS, voyons la structure d'une règle CSS en détail.

Chaque règle CSS comprend deux parties fondamentales : le sélecteur et le bloc de déclaration. Le bloc de déclaration est composé d'un ou plusieurs déclarations, et chaque déclaration est une paire comprenant une propriété et une valeur. Les feuilles de style sont construites à l'aide d'une série de règles comme celle-ci :

Le sélecteur définit quel élément du document XHTML sera affecté par la règle. Dans l'illustration précédente, tous les éléments h1 sont sélectionnés. Si le sélecteur était p, tous les paragraphes du document seraient sélectionnés.

La partie droite de la règle comprend le bloc de déclaration, constitué d'une ou plusieurs déclarations. Chaque déclaration est une combinaison d'une propriété CSS et d'une valeur à cette propriété. Dans l'illustration précédente, le bloc de déclaration contient deux déclarations. La première spécifie que les éléments affectés auront une couleur rouge (color: red). La seconde spécifie que les éléments affectés auront un arrière-plan jaune (background: yellow). Ainsi, tous les titres h1 du document seront présentés en texte rouge sur fond jaune.

Pour en savoir plus

• Comprendre la cascade, adaptation de Marc Hertzhog sur MarcArea.com.
• Trucs et astuces CSS, par Roger Johansson sur W3QC.org.
• CSS : Syntaxe de rigueur, par Raphaël Goetter sur AlsaCreations.com.
• Des CSS plus efficaces grâce aux raccourcis, par Roger Johansson sur Pompage.net.

• Design Web