Lorsqu'un navigateur lit une feuille de style, il formate le document HTML selon les informations dans la feuille de style.
Il existe trois manières d'insérer une feuille de style :
CSS externe
CSS interne
CSS en ligne
Avec un 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 à l'intérieur l'élément , à l'intérieur de la section head.
Les styles externes sont définis dans l'élément , à 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>Essayez-le vous-même →
<!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" :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Remarque : N'ajoutez pas d'espace entre la valeur de la propriété (20) et l'unité. (px):
Incorrect (espace) :
margin-left: 20 px;Correct (pas d'espace) :
margin-left: 20px;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 tête section.
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>Essayez-le vous-même →
<!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>
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é. Le L'attribut style peut contenir n'importe quelle propriété CSS.
Les styles en ligne sont définis dans l'attribut "style" du fichier concerné. élément:
<!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>Essayez-le vous-même →
<!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>
Astuce : Un style en ligne perd de nombreux avantages d'une feuille de style (en mélangeant contenu avec présentation). Utilisez cette méthode avec parcimonie.
Si certaines propriétés ont été définies pour le même sélecteur (élément) dans des feuilles de style différentes, 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 ait é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="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
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>Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
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 un nouveau style « virtuel » feuille 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 head)
Par défaut du navigateur
Ainsi, un style en ligne a la priorité la plus élevée et remplacera les styles externes et styles internes et paramètres par défaut du navigateur.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>