PhpBB Lab Académie

Réunir les choix typographiques et les couleurs construits dans les leçons précédentes, compléter la hiérarchie visuelle avec les vrais titres h3 de la page d’accueil, organiser styles.css avec des commentaires simples et vérifier que l’ensemble du petit site reste cohérent, lisible et facile à maintenir.

Avant de commencer

Dans les deux leçons précédentes, vous avez commencé à construire une véritable présentation pour le même petit site.

Votre feuille

styles.css

peut maintenant contenir :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Vous avez donc déjà défini :

- une famille de caractères ;
- une taille de texte de base ;
- une hauteur de ligne ;
- une hiérarchie entre

h1

et

h2

;
- une couleur de texte générale ;
- une couleur d’arrière-plan ;
- une couleur commune pour les titres ;
- une présentation particulière pour le nom du site.

Dans cette leçon, nous n’allons pas repartir dans une nouvelle direction.

Nous allons au contraire apprendre à réunir ces choix de manière cohérente.

Nous allons répondre à quatre questions :

- Comment compléter la hiérarchie visuelle des titres déjà présents dans la page ?
- Comment éviter de multiplier les choix sans raison ?
- Comment organiser

styles.css

pour le rendre plus facile à lire ?
- Comment vérifier l’ensemble de la typographie avant de passer à la mise en page ?

À la fin de cette leçon, la partie typographique de notre petit site formera un ensemble cohérent et organisé.

1. Reprendre la hiérarchie réelle de index.html

Dans le cours HTML, la page d’accueil a été construite avec plusieurs niveaux de titres.

Nous avons notamment :

h1 : Accueil

h2 : Ce que j’ai appris

h2 : Mes notes de progression
    h3 : Ma première page complète
    h3 : Mon formulaire de contact

h2 : Mon espace de travail

h2 : Les pages de mon site

Nous avons déjà défini la présentation des :

h1

et des :

h2

Mais les deux titres

h3

de la section :

Mes notes de progression

n’ont encore reçu aucune règle particulière.

Nous allons maintenant compléter cette hiérarchie visuelle.

2. Ajouter une règle pour les h3

Nous utilisons déjà :

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

Nous allons conserver la même couleur pour les

h3

.

Ajoutez :

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

Nous obtenons maintenant une progression simple :

texte courant = 1rem

h3 = 1.25rem

h2 = 1.5rem

h1 = 2rem

Cette progression correspond à la hiérarchie déjà présente dans HTML.

3. Vérifier les vrais h3 de la page

Enregistrez

styles.css

, puis ouvrez :

index.html

Dans la section :

Mes notes de progression

repérez :

Ma première page complète

et :

Mon formulaire de contact

Ces deux titres doivent maintenant utiliser la couleur :

#163b65

et la taille :

1.25rem

Nous n’avons créé aucun contenu de démonstration.

Nous avons simplement complété la présentation d’éléments qui existaient déjà dans notre projet.

4. Une hiérarchie visuelle doit suivre la structure

Nous avons maintenant :

h1 = 2rem

h2 = 1.5rem

h3 = 1.25rem

Ces tailles aident à distinguer visuellement les différents niveaux.

Mais elles ne créent pas la hiérarchie.

La hiérarchie existait déjà dans HTML :

h1
h2
h3

CSS vient seulement la rendre plus facile à percevoir visuellement.

Retenez donc toujours :

HTML définit les niveaux de titres.

CSS peut renforcer leur différence visuelle.

5. Garder une palette cohérente

Nous avons choisi dans la leçon précédente :

#1f2937

pour le texte courant,

#163b65

pour les titres,

et :

#4c1d95

pour le nom du site.

Nous n’avons pas besoin d’ajouter une nouvelle couleur simplement parce que nous venons de créer une règle

h3

.

Les

h3

appartiennent à la même hiérarchie de titres.

Nous pouvons donc conserver :

color: #163b65;

Cette décision simplifie la palette et rend le site plus cohérent.

6. Ne pas choisir une valeur différente sans raison

CSS permettrait d’écrire :

h1 {
    color: #163b65;
}

h2 {
    color: #183d68;
}

h3 {
    color: #153963;
}

Ces couleurs sont différentes.

Mais elles sont tellement proches qu’elles n’apportent ici aucune information utile.

Elles rendent seulement la feuille plus compliquée.

Nous préférons donc :

h1 {
    color: #163b65;
}

h2 {
    color: #163b65;
}

h3 {
    color: #163b65;
}

Les niveaux sont déjà différenciés par leur taille et surtout par leur structure HTML.

7. Relire la base typographique

Reprenons :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

Cette règle définit notre base générale.

Nous n’avons pas besoin de recopier :

font-family: Arial, sans-serif;

dans les règles

h1

,

h2

et

h3

simplement pour obtenir la même famille de caractères.

Nous conservons la règle générale, puis nous ajoutons seulement les différences nécessaires aux éléments particuliers.

Nous étudierons plus tard plus précisément le mécanisme qui permet à certaines propriétés de servir de base aux éléments contenus dans la page.

Pour le moment, retenez surtout cette méthode :

définir une base commune

puis ajouter uniquement les différences utiles

8. Le nom du site garde son propre rôle visuel

La classe :

.nom-site

contient actuellement :

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Le texte :

Mon premier site HTML

n’est pas un titre de section.

Il joue un rôle différent dans l’en-tête du site.

Nous pouvons donc conserver une présentation distincte.

Cette différence reste cependant limitée :

- une autre couleur ;
- du texte en gras.

Nous n’ajoutons pas plusieurs effets simplement pour le rendre plus visible.

Une présentation cohérente utilise des différences qui ont un rôle précis.

9. Notre feuille commence à contenir plusieurs groupes de règles

Regardons maintenant l’ensemble :

body {
    ...
}

h1 {
    ...
}

h2 {
    ...
}

h3 {
    ...
}

.nom-site {
    ...
}

La feuille reste encore courte.

Mais elle commence à contenir plusieurs types de règles :

- une base générale ;
- des règles pour les titres ;
- une règle particulière pour l’identité du site.

Nous allons maintenant apprendre une nouvelle manière de rendre le fichier plus facile à parcourir.

10. Découvrir les commentaires CSS

CSS permet d’écrire des commentaires.

Un commentaire commence par :

/*

et se termine par :

*/

Par exemple :

/* Base typographique */

Le navigateur ignore ce texte.

Le commentaire sert uniquement aux personnes qui lisent ou modifient le fichier CSS.

Nous pouvons donc l’utiliser comme repère.

11. Ajouter un commentaire pour la base

Au-dessus de la règle

body

, ajoutez :

/* Base typographique */

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

Le commentaire :

/* Base typographique */

indique le rôle de la partie qui suit.

Il ne change rien à l’affichage du site.

12. Ajouter un commentaire pour les titres

Avant les règles :

h1
h2
h3

ajoutez :

/* Titres */

Nous obtenons :

/* Titres */

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

Nous pouvons maintenant retrouver rapidement la partie consacrée à la hiérarchie visuelle des titres.

13. Ajouter un commentaire pour le nom du site

Avant :

.nom-site

ajoutez :

/* Identité du site */

La dernière partie devient :

/* Identité du site */

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Le commentaire indique pourquoi cette règle se trouve séparée des titres.

14. Ne pas commenter chaque propriété

Il serait possible d’écrire :

/* Couleur du texte */
color: #1f2937;

/* Taille du texte */
font-size: 1rem;

/* Hauteur de ligne */
line-height: 1.5;

Mais cela ajouterait beaucoup de texte sans réellement aider à comprendre la feuille.

Les noms :

color
font-size
line-height

ont déjà été expliqués dans le cours.

Nous utiliserons donc les commentaires pour indiquer l’organisation du fichier ou expliquer une décision particulière.

Retenez :

un commentaire utile explique l’organisation

il ne répète pas simplement chaque ligne

15. Une version organisée de styles.css

Votre feuille peut maintenant être :

/* Base typographique */

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

/* Titres */

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

/* Identité du site */

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Nous n’avons pas changé le rôle du site.

Nous avons simplement rendu la feuille plus complète et plus facile à lire.

16. Vérifier la cohérence sur index.html

Ouvrez :

index.html

Vérifiez la hiérarchie :

Accueil
Ce que j’ai appris
Mes notes de progression
Ma première page complète
Mon formulaire de contact
Mon espace de travail
Les pages de mon site

Le

h1

doit rester le plus grand.

Les

h2

doivent former un niveau intermédiaire.

Les deux

h3

doivent rester clairement identifiables comme des subdivisions de :

Mes notes de progression

La différence visuelle doit accompagner la structure HTML.

17. Vérifier également apropos.html et contact.html

Ouvrez ensuite :

apropos.html

puis :

contact.html

Vérifiez :

- la même famille de caractères ;
- la même couleur de texte de base ;
- la même présentation du

h1

;
- la même présentation de

Mon premier site HTML

.

Une feuille commune doit produire une identité cohérente sur les trois pages.

18. Vérifier de nouveau le zoom

Augmentez le zoom du navigateur.

Contrôlez :

- que le texte courant reste lisible ;
- que les niveaux de titres restent distinguables ;
- que les lignes ne se superposent pas ;
- qu’aucun contenu ne disparaît ;
- que la page reste compréhensible même lorsque les éléments prennent davantage de place.

Nous conserverons cette vérification tout au long du cours.

19. Vérifier de nouveau les couleurs

Nous n’avons pas changé les couleurs définies dans la leçon précédente.

Nous conservons :

#1f2937 sur #ffffff

pour le texte courant,

#163b65 sur #ffffff

pour les titres,

et :

#4c1d95 sur #ffffff

pour le nom du site.

Comme les paires de couleurs n’ont pas changé, les vérifications de contraste effectuées précédemment restent applicables.

Si nous modifions plus tard l’une de ces couleurs ou son arrière-plan, nous effectuerons une nouvelle vérification.

20. Une feuille CSS cohérente reste simple

À ce stade, nous pourrions être tentés d’ajouter davantage de règles pour rendre le site plus spectaculaire.

Ce n’est pas notre objectif.

Une bonne feuille CSS n’est pas celle qui contient le plus de propriétés.

Elle doit surtout :

- répondre aux besoins réels du projet ;
- rester compréhensible ;
- éviter les variations inutiles ;
- conserver une logique entre les pages ;
- ne pas dégrader la lisibilité ni l’accessibilité.

Nous continuerons donc à ajouter de nouvelles propriétés uniquement lorsqu’elles répondent à un besoin que nous pouvons expliquer.

21. Ce que nous avons construit dans ce chapitre

Depuis le début de ce chapitre, nous avons ajouté progressivement :

font-family
font-size
line-height
color
background-color

Nous avons aussi utilisé :

font-weight

déjà découvert dans le chapitre précédent.

Nous disposons maintenant :

- d’une base typographique ;
- d’une hiérarchie visuelle cohérente pour

h1

,

h2

et

h3

;
- d’une palette limitée ;
- de contrastes vérifiés ;
- d’une feuille CSS organisée avec des commentaires simples.

La partie consacrée à la typographie et aux couleurs peut maintenant être considérée comme suffisamment construite pour poursuivre.

22. Préparer la prochaine étape

Regardez maintenant la page d’accueil.

La typographie est plus cohérente qu’au début du cours.

Mais les éléments peuvent encore sembler proches les uns des autres.

Par exemple :

- un titre peut être très proche du paragraphe qui suit ;
- plusieurs blocs peuvent manquer d’espace entre eux ;
- le contenu d’une future zone encadrée pourrait toucher ses limites.

La prochaine étape sera donc de comprendre comment CSS gère l’espace autour et à l’intérieur des éléments.

Nous découvrirons deux propriétés fondamentales :

margin

et :

padding

Nous continuerons encore une fois avec exactement le même site.

23. Ce que vous devez comprendre avant le chapitre suivant

Vous devez maintenant être capable d’expliquer :

- pourquoi nous avons ajouté une règle pour les vrais

h3

de la page d’accueil ;
- pourquoi les

h1

,

h2

et

h3

utilisent ici la même couleur ;
- pourquoi leurs tailles suivent une progression simple ;
- pourquoi la structure HTML reste responsable de la véritable hiérarchie des titres ;
- pourquoi une palette limitée est plus facile à maintenir ;
- comment écrire un commentaire CSS ;
- à quoi servent les commentaires dans notre feuille ;
- pourquoi il n’est pas utile de commenter chaque propriété ;
- pourquoi nous continuons à vérifier le zoom et les contrastes ;
- pourquoi une feuille CSS cohérente ne doit pas accumuler des règles sans raison.

Dans le prochain chapitre, nous conserverons exactement cette feuille

styles.css

.

Nous commencerons à travailler sur les espacements avec

margin

et

padding

, toujours à partir des éléments déjà présents dans notre petit site.

Reprenons la page d’accueil.

Elle contient notamment :

<section>
    <h2>Mes notes de progression</h2>

    <article>
        <h3>Ma première page complète</h3>
        <p>J’ai appris à organiser une page avec header, nav, main, section et footer.</p>
    </article>

    <article>
        <h3>Mon formulaire de contact</h3>
        <p>J’ai appris à associer les labels aux champs et à choisir un type de saisie adapté.</p>
    </article>
</section>

Nous complétons donc la hiérarchie visuelle avec :

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

Puis nous organisons la feuille :

/* Base typographique */
body {
    ...
}

/* Titres */
h1 {
    ...
}

h2 {
    ...
}

h3 {
    ...
}

/* Identité du site */
.nom-site {
    ...
}

Nous n’avons ajouté ni contenu fictif ni nouvelle page.

Nous avons simplement rendu plus cohérente et plus lisible la présentation du site déjà construit.

Continuez avec le même petit site et le même fichier

styles.css

.

1. Ajouter la règle h3

Sous la règle

h2

, ajoutez :

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

Enregistrez puis ouvrez

index.html

.

Vérifiez les titres :

Ma première page complète
Mon formulaire de contact

2. Ajouter le commentaire de base

Au-dessus de

body

, ajoutez :

/* Base typographique */

3. Ajouter le commentaire des titres

Au-dessus de

h1

, ajoutez :

/* Titres */

Les règles

h1

,

h2

et

h3

restent regroupées sous ce commentaire.

4. Ajouter le commentaire de l’identité du site

Au-dessus de

.nom-site

, ajoutez :

/* Identité du site */

5. Vérifier que les commentaires ne changent rien visuellement

Enregistrez puis actualisez les trois pages.

La présentation doit rester identique, à l’exception de la nouvelle règle

h3

.

Les commentaires sont ignorés par le navigateur.

6. Vérifier la hiérarchie réelle

Sur

index.html

, parcourez :

h1
h2
h3

Vérifiez que la progression visuelle reste cohérente avec la structure du document.

7. Tester le zoom

Augmentez le zoom du navigateur.

Vérifiez que :

- les titres restent lisibles ;
- les différents niveaux restent compréhensibles ;
- le texte courant reste confortable ;
- aucun contenu ne se superpose.

8. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. pourquoi nous avons ajouté une règle

h3

;
2. pourquoi

h1

,

h2

et

h3

utilisent la même couleur ;
3. pourquoi leurs tailles sont différentes ;
4. comment s’écrit un commentaire CSS ;
5. pourquoi les commentaires sont utiles ;
6. pourquoi nous n’ajoutons pas une nouvelle couleur ou une nouvelle propriété sans raison ;
7. quel sera le prochain problème de présentation que nous allons étudier.

Dans cette leçon, nous avons réuni les choix typographiques et les couleurs construits dans les leçons précédentes.

Nous avons complété la hiérarchie des titres avec :

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

Nous disposons maintenant d’une progression simple :

texte courant = 1rem
h3 = 1.25rem
h2 = 1.5rem
h1 = 2rem

La structure HTML reste responsable de la véritable hiérarchie.

CSS ne fait que renforcer cette hiérarchie visuellement.

Nous avons également appris à organiser

styles.css

avec des commentaires :

/* Base typographique */
/* Titres */
/* Identité du site */

Ces commentaires servent de repères et sont ignorés par le navigateur.

Enfin, nous avons conservé une palette limitée, les contrastes déjà vérifiés et une présentation commune aux trois pages.

Dans le prochain chapitre, nous garderons exactement cette feuille CSS.

Nous commencerons à travailler sur les espacements avec :

margin

et :

padding

afin de mieux séparer les éléments et de comprendre progressivement le modèle de boîte CSS.