Comment ajouter du 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 existe trois manières 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 de tout un site Web 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" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</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 .css externe ne doit contenir aucune balise HTML.
Voici à quoi ressemble le fichier "mystyle.css":
"monstyle.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é :
Incorrect (espace) : margin-left: 20 px;
Correct (pas d'espace) :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>This is a
heading</h1>
<p>This is a paragraph.</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 concerné. 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;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Conseil : Un style en ligne perd de nombreux avantages d'une feuille de style (en mélangeant le contenu et 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 ait le style suivant pour l'élément <h1> :
h1
{
color: navy;
}Ensuite, supposons qu'une feuille de style interne ait é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 "marine" :
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Ordre en cascade
Quel style sera utilisé lorsque plusieurs styles sont spécifiés pour un élément HTML ?
Tous les styles d'une page seront "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 d'en-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 valeurs par défaut du navigateur.
Avez-vous déjà entendu parler des Espaces W3Schools ? Ici, vous pouvez créer votre propre site Web ou enregistrer gratuitement des extraits de code pour une utilisation ultérieure.
Commencez gratuitement ❯* Pas de carte de crédit nécessaire