Comment ajouter CSS

Quand le navigateur lit la feuille de styles, il formatte le document HTML en fonction des informations de la feuille de styles.

Trois méthodes d'utilisation de CSS

Il y a trois méthodes pour insérer une feuille de styles :

  • CSS externe
  • CSS interne
  • CSS en ligne

CSS externe

En utilisant une feuille de styles externe, vous pouvez changer l'apparence de tout le site web en modifiant simplement un fichier !

Chaque page HTML doit inclure une référence au fichier de feuille de styles externes à l'intérieur de l'élément <link> de la section <head> .

exemple

Les styles externes sont définis dans l'élément <link> de la section <head> de la page HTML :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Essayer par vous-même

Les feuilles de style externes peuvent être rédigées dans n'importe quel éditeur de texte et doivent être enregistrés avec l'extension .css.

Les fichiers .css externes ne devraient pas contenir de balises HTML.

"mystyle.css" est comme suit :

"mystyle.css"

body {
  couleur-fond: lightblue;
}
h1 {
  couleur: marine;
  marge-gauche: 20px;
}

Attention :Ne pas insérer d'espaces entre les valeurs des attributs et les unités (par exemple marge-gauche: 20 px;). La forme correcte est :marge-gauche: 20px;

CSS interne

Si une page HTML possède un style unique, vous pouvez utiliser une feuille de style interne.

Les styles internes sont définis dans l'élément <style> de la section <head>.

exemple

Les styles internes sont définis dans l'élément <style> de la section <head> de la page HTML :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  couleur-fond: lin;
}
h1 {
  couleur: marron;
  marge-gauche: 40px;
} 
</style>
</head>
<body>
<h1>Ceci est un en-tête</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Essayer par vous-même

CSS en ligne

Les styles en ligne (également appelés styles en ligne) peuvent être utilisés pour appliquer un style unique à un élément.

Pour utiliser les styles en ligne, ajoutez l'attribut style à l'élément pertinent. L'attribut style peut contenir n'importe quel attribut CSS.

exemple

Les styles en ligne sont définis dans l'attribut "style" de l'élément pertinent :

<!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>

Essayer par vous-même

Astuce :Les styles en ligne perdent de nombreux avantages des feuilles de style (en mélangeant le contenu et la présentation). Utilisez cette méthode avec précaution.

Feuilles de style multiples

si des attributs ont été définis pour le même sélecteur (élément) dans différentes feuilles de style, alors les valeurs de la feuille de style lue en dernier seront utilisées.

supposons queFeuille de style externeles styles suivants ont été définis pour l'élément <h1> :

h1 {
  couleur: marine;
}

supposons queFeuille de style interneles styles suivants ont été définis pour l'élément <h1> :

h1 {
  color: orange;    
}

exemple

si le style interne est lié à une feuille de style externeaprèsl'élément <h1> sera orange si défini

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Essayer par vous-même

exemple

toutefois, si le lien vers une feuille de style externeavantDéfinit les styles internes, l'élément <h1> sera alors bleu foncé :

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Essayer par vous-même

Ordre de couchage

Quelle style utilisera-t-on lorsque plusieurs styles sont spécifiés pour un élément HTML ?

Tous les styles de la page seront "emboîtés" selon les règles suivantes pour former un nouveau "tableau de styles virtuel", où la priorité la plus élevée est la première :

  1. Style en ligne (dans l'élément HTML)
  2. Feuilles de style externe et interne (dans la section head)
  3. Styles par défaut du navigateur

Par conséquent, les styles en ligne ont la priorité la plus élevée et couvriront les styles externes et internes ainsi que les styles par défaut du navigateur.

Essayer par vous-même