Style HTM : ajouter du CSS dans une page HTML

« Style HTM » désigne généralement la mise en forme d’un fichier HTML ou HTM à l’aide de CSS, que ce soit directement dans une balise, dans une section dédiée du document, ou via un fichier externe. La méthode la plus rapide consiste à utiliser l’attribut style directement sur une balise :

<p style="color: blue;">Ce texte est bleu.</p>

Voici les trois méthodes pour appliquer du style HTML à une page, avec des exemples concrets pour la couleur, la police, la taille du texte, les marges et l’alignement.

Sommaire

Différence entre .htm et .html

Les extensions .htm et .html désignent exactement le même type de document : une page web écrite en HTML. La seule différence vient d’une contrainte historique de certains anciens systèmes limitant les extensions de fichier à trois caractères, ce qui a donné naissance à .htm. Aujourd’hui, les deux extensions sont interprétées de façon identique par les navigateurs, et les méthodes de mise en forme présentées dans cet article s’appliquent indifféremment à l’une ou à l’autre.

Le rôle du CSS dans la mise en forme HTML

Le HTML structure le contenu d’une page (titres, paragraphes, images, liens), tandis que le CSS (Cascading Style Sheets) s’occupe de sa présentation visuelle : couleurs, polices, espacements, mise en page. Séparer structure et présentation permet de modifier l’apparence d’une page sans toucher à son contenu, ce qui facilite grandement la maintenance d’un site comportant plusieurs pages.

CSS inline avec l’attribut style

La méthode la plus directe consiste à utiliser l’attribut style="" sur une balise précise, avec une syntaxe propriété/valeur séparée par un point-virgule :

<p style="color: red; font-size: 18px;">Texte en rouge et agrandi</p>

Cette approche, appelée CSS inline, applique le style uniquement à l’élément concerné, sans affecter le reste de la page. Elle reste pratique pour un ajustement ponctuel, mais devient rapidement difficile à maintenir dès que plusieurs éléments doivent partager la même mise en forme, chaque modification nécessitant alors d’être répétée sur chaque balise concernée.

CSS interne avec la balise style

La balise <style>, placée dans la section <head> du document, permet de regrouper plusieurs règles CSS applicables à l’ensemble de la page :

<head>
  <style>
    p {
      color: darkgreen;
      font-family: Arial, sans-serif;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>

Cette méthode, appelée CSS interne, centralise les styles dans le document lui-même, ce qui évite la répétition présente avec le style inline. Elle reste toutefois limitée à la page dans laquelle elle est déclarée, contrairement à une feuille CSS externe.

CSS externe avec la balise link

Pour un site comportant plusieurs pages, la méthode recommandée consiste à créer un fichier style.css séparé, puis à le relier au document HTML avec la balise <link> dans le <head> :

<link rel="stylesheet" href="style.css">

Le fichier style.css contient alors l’ensemble des règles de mise en forme, réutilisables sur toutes les pages du site :

p {
  color: darkgreen;
  font-family: Arial, sans-serif;
  margin: 10px;
}

Cette approche centralise la feuille de style CSS dans un unique fichier, ce qui simplifie considérablement les mises à jour : modifier une règle dans style.css répercute automatiquement le changement sur toutes les pages qui y font référence.

Exemples de propriétés CSS courantes

Quelques propriétés CSS reviennent fréquemment dans la mise en forme d’une page HTML :

p {
  color: #333333;
  background-color: #f5f5f5;
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  margin: 15px 0;
  text-align: justify;
}

Cette règle définit la couleur du texte, la couleur de fond, la taille et la police de caractères, les marges verticales, ainsi que l’alignement du texte. Chaque propriété peut être appliquée individuellement, quelle que soit la méthode d’intégration choisie parmi les trois précédentes.

Comparer les trois méthodes de style HTML

Méthode	Portée	Facilité de maintenance	Cas d’usage typique
CSS inline	Un seul élément	Faible	Test rapide ou exception ponctuelle
CSS interne	Toute la page	Moyenne	Page unique ou prototype
CSS externe	Tout le site	Élevée	Site avec plusieurs pages

Classes CSS, identifiants et sélecteurs

Plutôt que de styliser chaque balise HTML une par une, les classes CSS permettent d’appliquer un même style à plusieurs éléments à la fois, via l’attribut class :

<p class="alerte">Message important</p>

.alerte {
  color: red;
  font-weight: bold;
}

Un identifiant, défini avec l’attribut id et ciblé en CSS par un dièse, fonctionne de façon similaire mais s’applique à un seul élément unique dans la page :

#titre-principal {
  text-align: center;
}

Les classes CSS restent généralement préférables aux identifiants pour la mise en forme, car elles peuvent être réutilisées sur plusieurs éléments sans dupliquer les règles.

Comprendre la cascade et la priorité des styles

Lorsque plusieurs règles CSS s’appliquent au même élément, la cascade détermine laquelle l’emporte. En règle générale, le CSS inline a la priorité la plus élevée, suivi des sélecteurs les plus spécifiques (comme un identifiant), puis des classes, et enfin des sélecteurs de balise génériques. Comprendre cette hiérarchie évite les situations où une règle définie dans une feuille externe semble ne produire aucun effet, alors qu’elle est simplement écrasée par une règle plus prioritaire ailleurs dans le document.

Erreurs fréquentes lors de la mise en forme HTML

Quelques erreurs reviennent régulièrement lors de l’écriture de style HTML :

Point-virgule oublié entre deux déclarations CSS, ce qui peut empêcher la propriété suivante d’être correctement interprétée.
Balise mal fermée, notamment <style> sans sa balise fermante correspondante, ce qui perturbe l’affichage du reste de la page.
Chemin incorrect vers le fichier CSS externe dans l’attribut href de la balise <link>, empêchant le navigateur de charger la feuille de style.
Confusion entre sélecteur de classe et d’identifiant, en oubliant le point devant une classe ou le dièse devant un identifiant dans le fichier CSS.

Pour un site comportant plusieurs pages, privilégier une feuille CSS externe organisée avec des classes réutilisables reste la pratique la plus efficace, aussi bien pour la cohérence visuelle du site que pour la simplicité des mises à jour futures.