Cours CSS / Appliquer des styles en ligne, internes et externes

Vous pouvez appliquer le CSS via l'attribut style d'un élément, un élément style dans le document HTML ou une feuille de style externe liée. Les feuilles de style externes sont généralement plus faciles à maintenir sur plusieurs pages, tandis que les autres méthodes conviennent à des utilisations plus petites et spécifiques.

Comparez les trois façons d'appliquer le CSS

Les trois méthodes appliquent le CSS. Les règles internes et externes ordinaires se concurrencent selon la cascade, y compris leurs sélecteurs et l'ordre des sources ; un fichier externe n'est pas intrinsèquement plus faible. Les déclarations en ligne ont généralement la priorité sur les déclarations normales de la feuille de style de l'auteur, mais certaines conditions comme !important changent cette comparaison. Pour plus de détails, voir CSS Héritage, Spécificité et Cascade.

Écrire des styles en ligne et internes

Dans les styles en ligne, vous écrivez la déclaration à l'intérieur de l’attribut style de l'élément que vous souhaitez décorer. Aucun sélecteur ni accolade externe n'est inclus. Le code suivant spécifie la couleur et le fond pour un seul texte-guide.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

Dans la feuille de style interne, les règles incluant les sélecteurs et les accolades sont écrites dans l'élément style à l'intérieur de head. Plusieurs phrases avec la même classe peuvent être décorées avec une seule règle. Dans l'exemple ci-dessous, la valeur de la classe HTML est notice et le sélecteur CSS est .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Les deux exemples sont des extraits de HTML pour comparer où ils sont écrits. Lors du changement de méthodes dans cet exercice, supprimez toutes les déclarations des mêmes propriétés que vous avez mises avec la méthode précédente. Laisser plusieurs méthodes en même temps rend difficile la distinction entre les échecs de connexion et les conflits de règles.

Lier une feuille de style externe

Créez un dossier garden vide et enregistrez les trois fichiers suivants : Le fichier CSS contient uniquement du CSS et n'inclut pas la balise <style>. Les deux fichiers HTML se lient à style.css dans le même dossier.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" signifie que le fichier connecté est une feuille de style, et href="style.css" est l'emplacement du fichier à lire. Dans les documents HTML5, il n'est pas nécessaire d'écrire séparément type="text/css" dans les connexions CSS ordinaires. Cet exercice, qui ouvre directement les fichiers locaux, ne nécessite pas de serveur ni de bibliothèques supplémentaires.

Lorsque vous ouvrez index.html dans votre navigateur, vous verrez un titre vert et une boîte d'information de couleur claire. Cliquez sur « View visitor information » (informations pratiques) pour aller à visit.html, et bien que le contenu soit différent, la couleur du titre et la forme de la boîte d'information sont les mêmes. Si vous changez la couleur du titre de style.css en #1d4ed8, puis rechargez les deux pages, les deux titres deviendront bleus. C'est l'avantage d'utiliser des fichiers communs.

Choisissez un chemin pour la structure du dossier

Le chemin ci-dessous est lu en fonction de l'emplacement du document HTML. Comme dans l'exemple, la prémisse est un document régulier dont l'URL de base n'a pas été remplacée par l'élément base. Si vous déplacez le fichier CSS, vous devez changer non seulement le nom du fichier mais aussi href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Pour la dernière organisation des dossiers, écrivez <link rel="stylesheet" href="../css/style.css"> dans pages/index.html. Le segment ../ monte d'un répertoire. Les chemins web utilisent des barres obliques (slashes). Une barre oblique au début, comme dans /css/style.css, se résout depuis la racine du site et a une signification différente de ce chemin relatif au fichier local. Voir MDN : Commencer.

Diagnostiquer les problèmes de chargement, de correspondance et de cascade

1. Tout d'abord, vérifiez la connexion du fichier. Vérifiez que l'extension n'est pas enregistrée en tant que .css.txt et que le href et l'emplacement réel du dossier correspondent. Sur un serveur web, respectez aussi les majuscules et les minuscules des noms de fichiers. Si la page est ouverte sur un serveur web, vous pouvez vérifier la requête et la réponse CSS dans l'onglet Réseau des Outils de développement. Les fichiers locaux peuvent ne pas afficher le même code de statut HTTP.
2. Vérifiez que le sélecteur correspond à l’élément cible. Si le HTML contient class="notice", mais que .notcie est écrit en CSS, la notification ne changera pas même si le fichier est lu normalement. Dans les Outils de développement, consultez le nom réel de la classe sous Éléments et repérez la règle dans Styles.
3. Vérifiez si la règle a été écrasée. Si une déclaration de couleur différente l'emporte plus tard, la déclaration originale peut apparaître barrée dans Styles. Veuillez vérifier les règles finales d'application séparément des problèmes liés aux fichiers CSS manquants.

Pour vérifier si la feuille de style se charge, ajoutez temporairement body { background-color: #fff4cc; } à sa fin et actualisez. Une page jaune confirme que le fichier est connecté. Ensuite, inspectez si le sélecteur de notice correspond et si une autre déclaration l'emporte. Retirez ensuite la règle temporaire. !important ne peut pas réparer un fichier manquant ou un sélecteur mal orthographié. Pour plus de détails, voir Inspecter le CSS avec DevTools : Styles et Calculé.