CSS - Syntaxe

Lucas D. -

Syntaxe CSS

Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.

Conseil: Exemple de règle CSS

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

p est le sélecteur, et { color: red; text-align: center; } est le bloc de déclaration. Le bloc de déclaration contient deux déclarations : color: red; et text-align: center;.

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Les sélecteurs CSS peuvent être des noms d'éléments, des noms de classes, des noms d'identifiants ou des noms d'attributs.

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

Conseil: Exemple de sélecteur d'élément

p {
  font-size: 16px;
}
  1. Le sélecteur d'identifiant utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique. L'id d'un élément est unique dans une page, donc le sélecteur d'identifiant est utilisé pour sélectionner un élément unique. Pour sélectionner un élément avec un id spécifique, écrivez un caractère dièse (#) suivi de l'id de l'élément :

Conseil: Exemple de sélecteur d'identifiant

#my-element {
  background-color: blue;
}
  1. Le sélecteur de classe sélectionne les éléments HTML 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 :

Conseil: Exemple de sélecteur de classe

.my-class {
  color: green;
}

Blocs de déclaration CSS

Un bloc de déclaration CSS est entouré d'accolades {} et peut contenir plusieurs déclarations se terminant par des points-virgules (;).

Une déclaration se compose de deux parties :

  • Propriété (nom prédéfini qui fait référence à des caractéristiques stylistiques)
  • Valeur (attribuée aux propriétés)

Conseil: Exemple de déclarations multiples

{
  color: blue;
  font-size: 12px;
  width: 100%;
}
  • color: blue; définit la couleur du texte.
  • font-size: 12px; définit la taille de la police.
  • width: 100%; définit la largeur par rapport à son conteneur parent.

En combinant des sélecteurs et des blocs de déclaration, vous pouvez créer des règles qui contrôlent l'apparence de vos pages web.

Utilisation du CSS

Le CSS peut être ajouté aux documents HTML de trois façons : en ligne, interne et externe.

CSS en ligne

Les styles en ligne sont utilisés pour appliquer un style à un seul élément HTML. Pour utiliser les styles en ligne, ajoutez l'attribut style à l'élément concerné. L'attribut style peut contenir n'importe quelle propriété CSS.

Conseil: Titre avec style en ligne

<h1 style="color: blue; font-size: 12px;">Titre avec style en ligne</h1>

CSS interne

Les styles internes sont définis dans l'élément <style>, à l'intérieur de la section <head> d'une page HTML. La feuille de style interne ne doit être utilisée que lorsqu'une seule page HTML nécessite un style unique.

Conseil: Exemple de CSS interne

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>

  <h1>Ceci est un titre</h1>
  <p>Ceci est un paragraphe.</p>

</body>
</html>

CSS externe

Avec les styles externes, vous pouvez modifier l'apparence d'un site web entier en changeant un seul fichier. Chaque page HTML doit inclure une référence au fichier de feuille de style externe dans l'élément <link>, à l'intérieur de la section head. Une feuille de style externe peut être écrite dans n'importe quel éditeur de texte et sauvegardée avec une extension .css. Le fichier .css externe ne doit contenir aucune balise HTML.

Conseil: Exemple de CSS externe

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <h1>Ceci est un titre</h1>
  <p>Ceci est un paragraphe.</p>

</body>
</html>

Le fichier externe styles.css :

h1 {
  color: navy;
  margin-left: 20px;
}

La méthode la plus courante pour ajouter du CSS aux pages HTML est d'utiliser des fichiers CSS externes afin que plusieurs pages partagent le même aspect visuel.