Comment ajouter du CSS au HTML
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 dans du HTML
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 modifier l'apparence d'un site web entier en modifiant un seul fichier !
Chaque page HTML doit inclure une référence au fichier de feuille de style externe dans l'élément <link>, dans 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>
Try it Yourself »
Une feuille de style externe peut être créée dans n'importe quel éditeur de texte et doit être enregistrée avec l'extension .css.
Le fichier .css externe 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é :
Incorrect (espace) : margin-left: 20 px;
Correct (sans espace) : margin-left: 20 px;
CSS interne
Une feuille de style interne peut être utilisée si une page HTML possède un style unique.
Le style interne est défini dans l'élément <style>, dans 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>
Try it Yourself »
CSS en ligne
Un style en ligne peut être utilisé pour appliquer un style unique à un élément unique.
Pour utiliser des styles en ligne, ajoutez l'attribut style à l'élément concerné. Cet attribut 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>
Try it Yourself »
Conseil : Un style en ligne perd de nombreux avantages d'une feuille de style (en mélangeant contenu et 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.
Supposons qu'une feuille de style externe ait 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>
Try it Yourself »
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>
Try it Yourself »
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 « cascadés » dans une nouvelle feuille de style « virtuelle » selon les règles suivantes, où le style 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)
- Paramètres par défaut du navigateur
Ainsi, un style en ligne a la priorité la plus élevée et remplacera les styles externes et internes ainsi que les valeurs par défaut du navigateur.
CSS — Comment ajouter du CSS au HTML — Vidéo W3Schools
Cette vidéo est une brève introduction à l'ajout de CSS au HTML.
Fait partie d'une série de tutoriels vidéo pour apprendre le CSS pour les débutants !
