Comment Ajouter du CSS
Comment ajouter du CSS
Lorsqu'un navigateur lit une feuille de style, il formate le document HTML selon les informations contenues dans celle-ci.
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 modifiant 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>, 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>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</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 aucun tag HTML.
Voici à quoi ressemble le fichier "mystyle.css" :
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} Remarque : Ne pas ajouter d'espace entre la valeur de la propriété (20) et l'unité (px) :
Incorrect (espace) : margin-left: 20 px;
Correct (sans 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>, 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>Ceci est un en-tête</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 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;">Ceci est un en-tête</h1>
<p style="color:red;">Ceci est un paragraphe.</p>
</body>
</html> Astuce : Un style en ligne perd de nombreux 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 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 "navy" :
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Ordre de 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 "cascaderont" dans une nouvelle feuille de style "virtuelle" selon les règles suivantes, où le numéro un a la plus haute priorité :
- Style en ligne (à l'intérieur d'un élément HTML)
- Feuilles de style externes et internes (dans la section head)
- Valeur par défaut du navigateur
Ainsi, un style en ligne a la plus haute priorité et remplacera les styles externes et internes ainsi que les valeurs par défaut du navigateur.
Avez-vous déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre propre site Web ou enregistrer des extraits de code pour une utilisation ultérieure, gratuitement.
* aucune carte de crédit requise