Code source, DOM et styles calculés

Le fichier enregistré est le texte que vous avez écrit. Le DOM est l’organisation d’éléments construite par le navigateur ; celui-ci peut corriger certains défauts d’imbrication. Le style calculé est la valeur effectivement utilisée après la cascade. Ces trois vues répondent à des questions différentes : « qu’ai-je écrit ? », « quelle structure existe ? », « quelle règle s’applique ? ».

La cascade et la spécificité CSS

Dans les exemples du cours, les règles proviennent du même fichier, sans couche CSS ni !important. Un sélecteur de classe est plus spécifique qu’un sélecteur de balise. À spécificité égale, la déclaration située plus tard gagne pour la même propriété. Cette règle ne signifie pas « la dernière règle gagne toujours ».

p { color: navy; }
.alerte { color: firebrick; }
p { color: green; }

Pour <p class="alerte">Attention</p>, la couleur reste firebrick : la classe l’emporte sur les deux sélecteurs p. Une autre propriété non concurrencée reste applicable. Ne recopiez pas toute la règle pour réparer une seule propriété.

inherit demande la valeur héritée ; une valeur définie directement sur l’enfant l’emporte sur une valeur simplement héritée. !important n’est pas une solution de diagnostic : il peut masquer une organisation incorrecte et rendre les modifications suivantes plus difficiles.

Démarche reproductible : enregistrer, recharger, inspecter le bon élément, relever la valeur calculée, désactiver une déclaration dans DevTools puis modifier le fichier source. Les modifications temporaires dans DevTools ne sont pas enregistrées automatiquement dans votre CSS.

Les outils de développement du navigateur

Un style absent peut venir de trois endroits différents : la ressource ne charge pas, le sélecteur ne correspond pas, ou une autre déclaration gagne dans la cascade. Ajouter une nouvelle règle sans identifier la cause risque de masquer le problème. L’inspecteur sert à observer ce que le navigateur a effectivement compris.

<style>
      body {
        font-family: system-ui, sans-serif;
        margin: 16px;
        color: #203047;
        background: #f3f6fa;
      }
      p {
        color: #334155;
      }
      .message {
        color: #9f1239;
      }
      .message {
        color: #3730a3;
      }
      #important {
        color: #205b32;
      }
      .carte a {
        text-decoration-thickness: 3px;
      }
      .carte > a {
        color: #954300;
      }
    </style>

<h1>Quelle règle gagne ?</h1>
    <p>Un paragraphe ordinaire.</p>
    <p class="message">Même classe, dernière règle de même spécificité.</p>
    <p id="important" class="message">Un identifiant plus spécifique.</p>
    <div class="carte">
      <a href="#fin">Lien enfant direct</a>
      <p><a href="#fin">Lien descendant plus profond</a></p>
    </div>
    <p id="fin">Destination des liens.</p>

Lecture accompagnée : les deux règles .message ont la même spécificité. Dans ce fichier, sans couche particulière ni !important, la dernière déclaration de couleur applicable gagne. Le sélecteur #important est plus spécifique ; cela ne signifie pas que le nom « important » possède un pouvoir spécial.

Méthode à réutiliser : symptôme → hypothèse → test → correction → nouveau test. Notez l’hypothèse, même lorsqu’elle était fausse : vous apprenez à expliquer une cause, pas seulement à obtenir une capture acceptable.

Les fichiers HTML et CSS

profils/
  index.html
  css/style.css
  images/avatar.svg

Dans index.html, href="css/style.css" charge la feuille depuis le dossier css. Dans une feuille CSS, un chemin url(...) est résolu par rapport au fichier CSS. Les noms de fichiers et leur casse doivent correspondre à leur utilisation. head contient les métadonnées, tandis que main appartient au body. title nomme l’onglet ; h1 nomme le contenu principal visible. Un fichier HTML bien structuré ne dépend pas des couleurs pour exprimer le rôle des sections.

La priorité entre les règles CSS

p { color: #334155; }
.message { color: #9f1239; }
.message { color: #3730a3; }

Pour des règles normales de la même origine et du même niveau de couche, la spécificité participe au choix de la règle appliquée. Un sélecteur d’identifiant est plus spécifique qu’un sélecteur de classe ; une classe est plus spécifique qu’un sélecteur de balise. À spécificité égale, la dernière déclaration rencontrée gagne. L’ordre des classes dans l’attribut class ne détermine pas cet ordre : c’est l’ordre des règles qui compte.

Certaines propriétés, comme color et font-family, peuvent être héritées du parent. margin n’est pas héritée. Évitez !important comme premier réflexe : cherchez la règle concurrente dans l’inspecteur. Le sélecteur descendant .carte a cible les liens dans une carte, même imbriqués plus profondément. Le sélecteur enfant .carte > a cible uniquement ses liens enfants directs.

Prédisez, puis exécutez : quelle couleur a le message ? Inversez les deux règles .message. Ajoutez un lien dans un paragraphe de la carte et comparez les deux combinateurs.

Inspecteur, console et panneau Réseau

Inspectez un élément pour voir le HTML courant, les règles appliquées et les styles calculés. Le panneau Réseau permet de vérifier le chargement de la feuille CSS et son statut HTTP. Une ressource CSS en 404 invite d’abord à vérifier son chemin. Une propriété CSS invalide est généralement ignorée ; elle ne bloque pas toute la page.

Une modification dans l’inspecteur change la page courante, mais n’enregistre pas votre fichier source. Recopiez la modification utile dans le projet, puis rechargez pour vérifier qu’elle persiste. Si une règle n’a aucun effet, vérifiez d’abord le chargement du fichier, le sélecteur et la validité de la déclaration, avant sa spécificité.

/* Incorrect : le nom de propriété n'existe pas */
.message { text-color: blue; }
/* Correct */
.message { color: blue; }

Pseudo-classes et dimensions des images

:hover cible le survol ; :focus-visible rend visible la prise de focus au clavier selon le comportement du navigateur. Un lien doit rester reconnaissable et utilisable au clavier. max-width: 100% limite une image à la largeur de son conteneur ; height: auto préserve ses proportions. Masquer un élément avec display: none retire aussi l’espace qu’il occupait.

Exemple court — une classe l’emporte sur une balise

Ce paragraphe est rouge : dans ce même fichier, la classe est plus spécifique que le sélecteur p. Déplacez les règles dans le laboratoire du cours pour vérifier que l’ordre seul ne suffit pas à inverser ce résultat.

<p class="alerte">Attention au chemin du fichier.</p>
<style>
  .alerte {
    color: firebrick;
  }
  p {
    color: navy;
  }
</style>

Pour approfondir

• Cascade, spécificité et héritage — MDN.
• Référence des pseudo-classes — MDN.
• Liste des propriétés CSS — MDN.