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 CSS
Il existe trois façons d’insérer une feuille de style:
- CSS externe
- CSS interne
- CSS en ligne
CSS externe
Avec une feuille de style externe, vous pouvez changer 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 à l’intérieur de l’élément <link>, à l’intérieur de la section head.
Exemple
Les styles externes sont définis dans l’élément <link>, à l’intérieur de la section <head> d’une page HTML:<!DOCTYPE html>
<html>
<head>
<link rel= »stylesheet » type= »text/css » href= »mystyle.css »>
</head>
<body>
<h1>Ceci est un titre.</h1>
<p>Ceci est un paragrpahe.</p>
</body>
</html>
Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte et doit être enregistrée avec une extension .css.
Le fichier externe .css ne doit contenir aucune balise HTML.
Voici à quoi ressemble le fichier « mystyle.css »:
« mystyle.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é (comme margin-left: 20 px;). La bonne façon est:margin-left: 20px;
CSS interne
Une feuille de style interne peut être utilisée si une seule page HTML a un style unique.
Le style interne est défini à l’intérieur de l’élément <style>, à l’intérieur de la section head.
Exemple
Les styles internes sont définis dans l’élément <style>, à l’intérieur de la section <head> d’une page HTML:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Ceci est un titre.</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
CSS en ligne
Un style en ligne peut être utilisé pour appliquer un style unique à un seul élément.
Pour utiliser des styles en ligne, ajoutez l’attribut style à l’élément approprié. L’attribut style peut contenir n’importe quelle propriété CSS.
Exemple
Les styles en ligne sont définis dans l’attribut « style » de l’élément concerné:<!DOCTYPE html>
<html>
<body>
<h1 style= »color:blue;text-align:center; »>Ceci est un titre.</h1>
<p style= »color:red; »>Ceci est un paragraphe.</p>
</body>
</html>
Astuce: 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.
Feuilles de style multiples
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.
Supposons qu’une feuille de style externe possède le style suivant pour l’élément <h1>:
h1 {
color: navy;
}
Supposons ensuite qu’une feuille de style interne possède également le style suivant pour l’élément <h1>:h1 {
color: orange;
}
Exemple
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= »mystyle.css »>
<style>
h1 {
color: orange;
}
</style>
</head>
Exemple
Cependant, si le style interne est défini avant le lien vers la feuille de style externe, les éléments <h1> seront « navy »:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel= »stylesheet » type= »text/css » href= »mystyle.css »>
</head>
Ordre en cascade
Quel style sera utilisé lorsqu’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, où le numéro un a la priorité la plus élevée:
- Style en ligne (à l’intérieur d’un élément HTML)
- Feuilles de style externes et internes (dans la section tête)
- Navigateur par défaut
Ainsi, un style en ligne a la priorité la plus élevée et remplacera les styles externes et internes et les paramètres par défaut du navigateur.