PhpBB Lab Académie

Continuer avec le même petit site et la même feuille styles.css, comprendre qu’un sélecteur d’élément cible tous les éléments correspondants, utiliser une classe pour cibler un rôle plus précis dans les pages et réutiliser cette même classe sur les trois pages sans dupliquer inutilement les règles CSS.

Avant de commencer

Dans la leçon précédente, vous avez créé :

styles.css

et relié cette feuille aux trois pages du site :

index.html
apropos.html
contact.html

Votre dossier

mon-premier-site

contient maintenant ces pages ainsi que la feuille CSS créée dans la première leçon.

Votre fichier contient déjà :

h1 {
    color: darkblue;
}

Cette première règle nous a permis de modifier la présentation des titres principaux :

Accueil
À propos
Contact

Nous allons maintenant poursuivre exactement le même travail.

Dans cette leçon, nous allons répondre à quatre questions :

- Comment cibler tous les éléments d’un même type ?
- Que faire lorsque nous ne voulons pas cibler tous les éléments du même type ?
- Qu’est-ce qu’une classe ?
- Comment réutiliser une même classe sur plusieurs pages ?

À la fin de cette leçon, vous saurez utiliser un sélecteur d’élément et un sélecteur de classe sur les éléments déjà présents dans votre petit site.

1. Reprendre la règle h1

Nous avons déjà écrit :

h1 {
    color: darkblue;
}

Le sélecteur :

h1

cible tous les éléments

h1

des pages qui chargent

styles.css

.

Nous l’avons vérifié avec les trois titres principaux du site.

Ce type de sélecteur utilise directement le nom d’un élément HTML.

Nous l’appellerons :

sélecteur d’élément

2. Un sélecteur d’élément cible tous les éléments correspondants

Prenons maintenant la page :

index.html

Elle contient plusieurs titres

h2

, notamment :

Ce que j’ai appris
Mes notes de progression
Mon espace de travail
Les pages de mon site

Si nous écrivons :

h2 {
    color: darkgreen;
}

la règle concerne tous les éléments

h2

de la page.

Ajoutez cette règle dans :

styles.css

Votre fichier contient maintenant :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

Enregistrez puis actualisez

index.html

.

Les quatre titres de niveau 2 doivent maintenant utiliser la même couleur.

3. Pourquoi tous les h2 sont-ils concernés ?

Le sélecteur :

h2

ne désigne pas un titre particulier.

Il signifie :

cette règle concerne les éléments h2

Le navigateur applique donc la règle à chaque

h2

correspondant.

Nous retrouvons exactement le même principe qu’avec :

h1

dans la leçon précédente.

Retenez :

h1 = tous les éléments h1 concernés

h2 = tous les éléments h2 concernés

4. Un sélecteur d’élément est parfois trop général

Regardons maintenant le début de notre en-tête.

Dans les trois pages, nous avons :

<header>
    <p>Mon premier site HTML</p>

    <nav>
        ...
    </nav>
</header>

Le nom du site est placé dans un élément :

p

Mais nos pages contiennent beaucoup d’autres paragraphes.

Sur

index.html

, nous avons par exemple des paragraphes dans les sections et dans les notes de progression.

Sur

contact.html

, nous avons également du texte autour du formulaire.

Si nous écrivons :

p {
    color: darkslateblue;
}

nous ne ciblons pas uniquement le nom du site.

Nous ciblons tous les paragraphes.

Ce n’est pas ce que nous voulons ici.

Nous avons donc besoin d’un moyen plus précis d’identifier uniquement les paragraphes qui jouent le rôle de nom du site.

5. Retrouver un attribut déjà connu : class

Dans le cours HTML, vous avez appris qu’un élément peut posséder des attributs.

Nous allons maintenant utiliser l’attribut :

class

Une classe permet de donner un nom commun à un ou plusieurs éléments.

Nous allons utiliser le nom :

nom-site

pour identifier le paragraphe qui contient :

Mon premier site HTML

Dans

index.html

, remplacez :

<p>Mon premier site HTML</p>

par :

<p class="nom-site">Mon premier site HTML</p>

Le contenu du paragraphe ne change pas.

Son rôle HTML ne change pas non plus.

Nous lui avons simplement ajouté un attribut que CSS pourra utiliser pour le cibler plus précisément.

6. Ajouter la même classe dans les trois pages

Le même nom de site apparaît dans l’en-tête de :

index.html
apropos.html
contact.html

Nous voulons que ces trois paragraphes partagent la même présentation.

Ajoutez donc également :

class="nom-site"

au paragraphe correspondant dans

apropos.html

et dans

contact.html

.

Dans les trois pages, nous obtenons :

<p class="nom-site">Mon premier site HTML</p>

Nous avons maintenant trois éléments différents qui partagent la même classe.

7. Cibler une classe en CSS

Dans CSS, un sélecteur de classe commence par un point.

Notre classe s’appelle :

nom-site

Le sélecteur CSS correspondant est donc :

.nom-site

Ajoutez dans

styles.css

:

.nom-site {
    color: darkslateblue;
}

Votre fichier contient maintenant :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
}

Enregistrez puis actualisez les trois pages.

Le texte :

Mon premier site HTML

doit utiliser la nouvelle couleur dans chacun des trois en-têtes.

8. Ne pas confondre le nom de la classe et son sélecteur

Dans HTML, nous écrivons :

class="nom-site"

Le nom de la classe est donc :

nom-site

Dans CSS, nous écrivons :

.nom-site

Le point indique que nous utilisons un sélecteur de classe.

Nous pouvons résumer :

HTML : class="nom-site"

CSS : .nom-site

Le point appartient au sélecteur CSS.

Il n’est pas écrit dans la valeur de l’attribut

class

.

9. Pourquoi ne pas utiliser simplement p ?

Comparons :

p {
    color: darkslateblue;
}

et :

.nom-site {
    color: darkslateblue;
}

Le sélecteur :

p

cible tous les paragraphes.

Le sélecteur :

.nom-site

cible seulement les éléments qui possèdent :

class="nom-site"

Dans notre projet, nous voulons modifier le nom du site sans imposer cette couleur à tous les autres paragraphes.

La classe est donc plus adaptée à ce besoin précis.

10. Une classe peut être réutilisée

Nous avons ajouté :

class="nom-site"

dans trois fichiers différents.

La règle CSS n’a pourtant été écrite qu’une seule fois :

.nom-site {
    color: darkslateblue;
}

C’est l’un des intérêts des classes.

Nous pouvons attribuer le même nom de classe à plusieurs éléments qui jouent le même rôle.

Puis une seule règle CSS peut les cibler.

Dans notre cas :

index.html       apropos.html      -> .nom-site
contact.html      /

La présentation reste ainsi cohérente sur les trois pages.

11. Une classe ne change pas le rôle HTML de l’élément

Prenons :

<p class="nom-site">Mon premier site HTML</p>

Cet élément reste un paragraphe.

La classe ne le transforme pas en titre, en navigation ou en autre élément.

Elle fournit simplement un nom que nous pouvons utiliser pour le cibler.

Retenez :

p = rôle HTML de l’élément

class="nom-site" = nom supplémentaire permettant notamment de le cibler

La structure HTML reste donc notre base.

12. Choisir un nom de classe qui décrit le rôle

Nous avons choisi :

nom-site

et non :

texte-violet

Pourquoi ?

Parce que :

nom-site

décrit le rôle de l’élément dans le projet.

La couleur pourra changer plus tard sans rendre le nom de la classe incohérent.

Si nous avions choisi :

texte-violet

et que nous remplacions ensuite la couleur par du bleu ou du noir, le nom ne décrirait plus correctement son utilisation.

Pour commencer, retenez cette habitude :

préférer un nom qui décrit le rôle plutôt qu’une apparence précise

13. Les tirets dans un nom de classe

Notre classe s’appelle :

nom-site

Le tiret permet de séparer les mots tout en conservant un seul nom de classe.

Nous pouvons donc écrire :

class="nom-site"

puis :

.nom-site

dans CSS.

Nous utiliserons régulièrement cette manière de nommer les classes lorsque plusieurs mots sont nécessaires.

14. Vérifier le résultat sur le vrai site

Ouvrez successivement :

index.html
apropos.html
contact.html

Vérifiez :

- que les

h1

restent en bleu foncé ;
- que les

h2

de la page d’accueil utilisent le vert foncé ;
- que le texte

Mon premier site HTML

utilise la couleur de

.nom-site

;
- que les autres paragraphes n’ont pas reçu cette couleur uniquement à cause de la nouvelle classe.

Nous avons donc maintenant trois manières de raisonner :

h1 = tous les h1

h2 = tous les h2

.nom-site = uniquement les éléments ayant class="nom-site"

15. Vérifier qu’une classe est correctement reliée à sa règle

Si la règle :

.nom-site {
    color: darkslateblue;
}

ne semble pas fonctionner, vérifiez :

1. l’élément possède-t-il bien :

class="nom-site"

2. le sélecteur CSS commence-t-il bien par un point ?

.nom-site

3. le nom est-il exactement le même dans HTML et dans CSS ?

4. le fichier

styles.css

est-il enregistré ?

5. la page charge-t-elle toujours correctement la feuille de style ?

Comme dans la leçon précédente, vérifiez un élément à la fois.

16. Notre feuille CSS à la fin de la leçon

À ce stade,

styles.css

peut contenir :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
}

Chaque règle possède pour le moment une seule déclaration.

Nous avons volontairement gardé cette structure simple.

L’objectif de cette leçon était de comprendre comment choisir les éléments concernés par une règle.

17. Préparer la prochaine étape

Regardons cette règle :

.nom-site {
    color: darkslateblue;
}

Elle contient actuellement une seule déclaration :

color: darkslateblue;

Mais nous pourrions vouloir modifier plusieurs aspects de la présentation du nom du site.

Nous pourrions par exemple agir sur sa couleur, mais aussi sur d’autres propriétés.

Nous n’allons pas encore ajouter ces nouvelles déclarations.

Ce sera précisément le sujet de la prochaine leçon.

Nous garderons :

.nom-site

et nous apprendrons à enrichir cette même règle sans créer un nouveau sélecteur pour chaque propriété.

18. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- ce qu’est un sélecteur d’élément ;
- pourquoi

h2

cible tous les éléments

h2

correspondants ;
- pourquoi

p

serait trop général pour cibler uniquement le nom du site ;
- ce qu’est une classe ;
- comment ajouter une classe à un élément HTML ;
- pourquoi un sélecteur de classe commence par un point ;
- la différence entre

class="nom-site"

et

.nom-site

;
- pourquoi une même classe peut être utilisée dans plusieurs pages ;
- pourquoi il est préférable de nommer une classe selon son rôle plutôt que selon sa couleur.

Dans la prochaine leçon, nous continuerons avec le même fichier :

styles.css

et la même règle :

.nom-site

Nous apprendrons à placer plusieurs déclarations dans un même bloc CSS.

Reprenons un élément déjà présent dans l’en-tête des trois pages :

<p>Mon premier site HTML</p>

Nous lui ajoutons une classe qui décrit son rôle :

<p class="nom-site">Mon premier site HTML</p>

La même modification est effectuée dans :

index.html
apropos.html
contact.html

Dans

styles.css

, nous pouvons alors écrire :

.nom-site {
    color: darkslateblue;
}

Le sélecteur :

.nom-site

ne cible pas tous les paragraphes.

Il cible uniquement les éléments qui possèdent :

class="nom-site"

Une seule règle permet donc de conserver la même présentation du nom du site sur les trois pages.

Vous allez maintenant reprendre le site dans l’état laissé par la première leçon.

1. Conserver la règle h1

Votre fichier

styles.css

contient déjà :

h1 {
    color: darkblue;
}

Ne supprimez pas cette règle.

2. Ajouter une règle pour les h2

Ajoutez :

h2 {
    color: darkgreen;
}

Enregistrez puis ouvrez

index.html

.

Vérifiez que les titres :

Ce que j’ai appris
Mes notes de progression
Mon espace de travail
Les pages de mon site

utilisent la nouvelle couleur.

3. Ajouter la classe nom-site dans HTML

Dans

index.html

, repérez :

<p>Mon premier site HTML</p>

et remplacez-le par :

<p class="nom-site">Mon premier site HTML</p>

Faites la même modification dans :

apropos.html

et :

contact.html

4. Ajouter le sélecteur de classe

Dans

styles.css

, ajoutez :

.nom-site {
    color: darkslateblue;
}

Enregistrez puis actualisez les trois pages.

Vérifiez que le nom du site utilise cette couleur sans modifier tous les autres paragraphes.

5. Observer la différence

Expliquez avec vos propres mots ce qui se passerait si vous remplaciez :

.nom-site

par :

p

dans cette règle.

Ne modifiez pas définitivement le fichier : l’objectif est de comprendre pourquoi le sélecteur

p

serait trop général pour notre besoin.

6. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez :

1. pourquoi

h2

est un sélecteur d’élément ;
2. pourquoi

.nom-site

commence par un point ;
3. pourquoi la même classe est utilisée dans les trois pages ;
4. pourquoi

nom-site

est un nom plus durable que

texte-violet

;
5. pourquoi le paragraphe reste un élément

p

même après l’ajout de la classe.

Un sélecteur CSS indique quels éléments sont concernés par une règle.

Un sélecteur d’élément utilise directement le nom de l’élément.

Par exemple :

h2 {
    color: darkgreen;
}

cible les éléments

h2

correspondants.

Lorsque ce type de sélecteur est trop général, nous pouvons utiliser une classe.

Dans HTML :

<p class="nom-site">Mon premier site HTML</p>

la classe s’appelle :

nom-site

Dans CSS, elle est ciblée avec un point :

.nom-site {
    color: darkslateblue;
}

La même classe peut être utilisée dans plusieurs pages.

Une seule règle CSS suffit donc pour présenter de manière cohérente le nom du site dans :

index.html
apropos.html
contact.html

Le nom d’une classe doit de préférence décrire son rôle plutôt qu’une apparence qui pourra changer.

Dans la prochaine leçon, nous conserverons la règle

.nom-site

et nous apprendrons à lui ajouter plusieurs déclarations dans le même bloc.