Syntaxe et sélecteurs CSS

Syntaxe CSS

Un ensemble de règles CSS se compose d’un sélecteur et d’un bloc de déclaration:

Le sélecteur pointe sur l’élément HTML que vous souhaitez styler.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration inclut un nom de propriété CSS et une valeur, séparés par deux points.

Une déclaration CSS se termine toujours par un point-virgule et les blocs de déclaration sont entourés d’accolades.

Dans l’exemple suivant, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge:

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

Sélecteurs CSS

Les sélecteurs CSS permettent de « rechercher » (ou de sélectionner) des éléments HTML en fonction de leur nom, id, classe, attribut, etc.


Le sélecteur d’élément

Le sélecteur d’élément sélectionne les éléments en fonction du nom de l’élément.

Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci (dans ce cas, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge):

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

Le sélecteur d’identifiant

Le sélecteur 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, le sélecteur d’identifiant sert donc à sélectionner un élément unique!

Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l’identifiant de l’élément.

La règle de style ci-dessous sera appliquée à l’élément HTML avec id="para1":

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

Remarque: un identifiant ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Le sélecteur de classe

Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique.

Pour sélectionner des éléments avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe.

Dans l’exemple ci-dessous, tous les éléments HTML avec class="center" seront en rouge et centrés:

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

Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.

Dans l’exemple ci-dessous, seuls les éléments <p> avec class = « center » seront alignés au centre:

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

Les éléments HTML peuvent également faire référence à plus d’une classe.

Dans l’exemple ci-dessous, l’élément <p> sera stylé selon la classe center et la classe large:

<p class="center large">Ce paragraphe fait référence à deux classes.</p>

Remarque: Un nom de classe ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Sélecteurs de regroupement

Si vous avez des éléments avec les mêmes définitions de style, comme ceci:

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

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

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

Il sera préférable de regrouper les sélecteurs pour minimiser le code.

Pour regrouper les sélecteurs, séparez chaque sélecteur par une virgule.

Dans l’exemple ci-dessous, nous avons regroupé les sélecteurs à partir du code ci-dessus:

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

Commentaires CSS

Les commentaires sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifiez le code source à une date ultérieure.

Les commentaires sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */. Les commentaires peuvent également s’étendre sur plusieurs lignes:

p {
  color: red;
  /* Ceci est un commentaire sur une ligne */
  text-align: center;
}

/* Ceci
est un commentaire
sur plusieurs
lignes */