Rappel Syntaxe CSS

Qu'est-ce qu'une Règle CSS

Une règle CSS consiste en un sélecteur et un groupe de déclaration:
syntaxe du css

-Le Sélecteur pointe sur l'élément HTML à qui l'on veut attribuer du style.
-Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules (;)
-Chaque déclaration contient un nom de propriété et sa valeur séparés (:)
-Une déclaration CSS se termine nécessairement par un point-virgule (;)
-Les blocs de déclarations sont contenus dans une paire d'accolade ( {} )
Dans l'exemple suivant grâce au CSS on met tous les paragraphes en rouge et centrés

p {
color: red;
text-align: center;
}

Qu'est-ce qu'un Sélecteur CSS

Un sélecteur CSS est utilisé pour "trouver" (sélectionner) un ou plusieurs élément HTML en se basant sur le nom
de leur élément ou de leur id (identifiant) ou de leur class (classe) ou de leurs attribut et même plus.

Le sélecteur id

Le sélecteur de id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
L'identifiant d'un élément doit être unique dans une page, de sorte que le sélecteur id utilisé pour sélectionner soit un élément unique!
Pour sélectionner un élément avec un id spécifique,
il d'abord écrire un dièse (#), suivi par l'identifiant de l'élément. La règle de style ci-dessous sera appliquée é l'élément HTML
contenant id = "para1":

#para1 {
text-align: center;
color: red;
}

Le sélecteur de classe

Le séecteur de classe sélectionne des éléments avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique,
il faut d'abord écrire un point (.), suivi du nom de la classe.
Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" seront rouge et alignés au centre:

.center {
text-align: center;
color: red;
}

Grouper les sélecteurs

Si par exemple on a la même définition CSS pour plusieurs sélecteurs:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

Il serait plus judicieux et plus économique de grouper les sélecteur.
Pour grouper les sélecteurs on les écrit séparé avec une virgule (,)
Voici les sélecteurs précédents sous la forme groupée:

h1,h2,p {
text-align: center;
color: red;
}

Les commentaires en CSS

Les commentaires sont destinés à expliquer le code
surtout quand on lit le code à une date ultérieure
Un commentaire CC commence par /* et finit par */
Les commentaires peuvent aussi se répandre sur plusieurs lignes:

h1 {
text-align: center;
/* Ceci est un commentaire sur une seule ligne */
color: red;
/* Ceci est un commentaire
sur
plusieurs lignes*/
}

Chapitre suivant où mettre le CSS
Retour