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:
- Style en ligne (à l’intérieur d’un élément HTML)
- Feuilles de style externes et internes (dans la section principale)
- 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.
Modèle de boîte
Tous les éléments HTML de votre page web sont considéré comme une boite par CSS. Chaque élément HTML est une boite comportement plusieurs boite à l’intérieur.
- Le contenu : c’est le contenu de votre élément HTML
- La marge interne : c’est l’espace autour du contenu
- La bordure : c’est le bord de votre élément
- La marge externe : c’est l’espace à l’extérieur de la bordure de l’élément
On peut modifier en CSS chacune de ces propriétés.
Par exemple le code ci-dessous défini 10 pixels d’espace entre le contenu et la bordure, une bordure noire de 1 pixel d’épaisseur et 20 pixels d’espace à l’extérieur de la bordure.
p {
padding: 10px;
boder: 1px solid black;
margin : 20px;
}
Voyons maintenant comment cibler des éléments HTML pour leur appliquer des règles CSS :