Node.js - 5.16 Styliser les pages avec du CSS dans une balise style

Les pages HTML renvoyées par Express ont besoin de style pour être agréables à lire. Cette leçon montre comment ajouter du CSS directement dans la page, avec une balise style placée dans la section head. Cette méthode permet de travailler vite, avant de passer à des fichiers externes.

Nommer les classes avec BEM

La méthode BEM nomme les classes CSS selon un bloc, puis ses éléments. Par exemple, main-header désigne la navigation principale de l'en-tête. Cette convention évite les conflits entre des classes qui porteraient le même nom.

Mettre en forme l'en-tête

L'en-tête prend toute la largeur de la page et mesure 3,5 rem de haut. Il reçoit une couleur de fond jaune. Les marges et le remplissage du corps de la page sont supprimés, pour que l'en-tête colle aux bords.

La liste des liens passe en affichage flex, afin que les éléments soient côte à côte et centrés verticalement.

body {
  margin: 0;
  padding: 0;
}

.main-header {
  width: 100%;
  height: 3.5rem;
  background-color: yellow;
  display: flex;
  align-items: center;
}

Ajouter un effet au survol

Les liens changent de couleur au survol et lorsqu'ils sont actifs. La classe active signale le lien de la page affichée. La page produit reprend le même style d'en-tête, en activant le lien correspondant.

En résumé

Une balise style permet d'ajouter du CSS directement dans une page Express. La méthode BEM rend les noms de classes clairs. L'en-tête se règle avec les propriétés de taille, de fond et d'alignement, puis le CSS sera déplacé dans un fichier externe.

Points clés

• La méthode BEM nomme les classes par bloc et par élément.
• Une balise style dans le head permet de tester du CSS rapidement.
• width, height et background-color règlent la taille et la couleur de l'en-tête.
• display: flex aligne les liens côte à côte dans la navigation.
• Les liens changent de couleur au survol et lorsqu'ils sont actifs.
• Le CSS sera déplacé dans un fichier externe dans la leçon suivante.

Questions fréquentes

Pourquoi garder le CSS dans une balise style ?

C'est pratique pour tester un style et voir son effet immédiatement. Pour un vrai projet, un fichier CSS séparé est préférable.

Qu'est-ce que la méthode BEM ?

C'est une convention de nommage des classes CSS qui découpe les noms en bloc et en élément. Elle limite les conflits de noms.

Pourquoi utiliser des rem plutôt que des pixels ?

Les rem s'adaptent à la taille de police de la page, alors que les pixels restent fixes. La vidéo signale cet avantage.