Comment utiliser CSS ?

Lorsqu’un navigateur lit une feuille de style, il formate le document HTML en fonction des informations contenues dans la feuille de style.


Trois façons d’insérer du CSS

Il y a trois façons d’insérer une feuille de style:

  • Feuille de style externe
  • Feuille de style interne
  • Style en ligne

Feuille de style externe

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!

Chaque page doit inclure une référence au fichier de feuille de style externe à l’intérieur de l’élément <link>. L’élément <link> va à l’intérieur de la section <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucune balise HTML. Le fichier de feuille de style doit être enregistré avec une extension .css.

Voici à quoi ressemble « style.css »:

body {
  background-color: lightblue;
}

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

Remarque: N’ajoutez pas d’espace entre la valeur de la propriété et l’unité (telle que 
margin-left: 20 px;). 
La manière correcte est:
margin-left: 20px;

Feuille de style interne

Une feuille de style interne peut être utilisée si une seule page a un style unique.

Les styles internes sont définis dans l’élément <style>, dans la section <head> d’une page HTML:

<head>
<style>
body {
  background-color: linen;
}

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

Styles en ligne

Un style en ligne peut être utilisé pour appliquer un style unique à un seul élément.

Pour utiliser des styles inline, ajoutez l’attribut style à l’élément concerné. L’attribut style peut contenir n’importe quelle propriété CSS.

L’exemple ci-dessous montre comment changer la couleur et la marge gauche d’un élément <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Conseil: Un style en ligne perd beaucoup des avantages d’une feuille de style (en mélangeant le contenu avec la présentation). 
Utilisez cette méthode avec parcimonie.

Plusieurs feuilles de style

Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style lue sera utilisée. 

Exemple

Supposons qu’une feuille de style externe ait le style suivant pour l’élément <h1>:

h1 {
  color: blue;
}

supposons ensuite qu’une feuille de style interne possède également le style suivant pour l’élément <h1>:

h1 {
  color: orange;    
}

Si le style interne est défini après le lien vers la feuille de style externe, les éléments <h1> seront « orange »:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Cependant, si le style interne est défini avant le lien vers la feuille de style externe, les éléments <h1> seront « blue »:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Commande en cascade

Quel style sera utilisé quand il y a plus d’un style spécifié pour un élément HTML?

Tous les styles d’une page seront « mis en cascade » dans une nouvelle feuille de style « virtuelle » selon les règles suivantes, dans lesquelles le numéro un a la priorité la plus élevée:

  1. Style en ligne (à l’intérieur d’un élément HTML)
  2. Feuilles de style externes et internes (dans la section principale)
  3. Navigateur par défaut

Ainsi, un style en ligne a la priorité la plus haute et remplace les styles internes et externes et les valeurs par défaut du navigateur.