PhpBB Lab Académie

Continuer avec le même petit site et la règle .nom-site créée dans la leçon précédente, comprendre qu’une règle CSS peut contenir plusieurs déclarations, ajouter une nouvelle propriété sans répéter le sélecteur, comprendre le rôle du point-virgule entre les déclarations et conserver une feuille styles.css claire et cohérente.

Avant de commencer

Dans la leçon précédente, vous avez continué à travailler sur le même petit site.

Votre dossier :

mon-premier-site

contient toujours :

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

Vous avez également ajouté la classe :

nom-site

au paragraphe qui contient le nom du site dans les trois pages :

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

À la fin de la leçon, votre feuille

styles.css

pouvait contenir :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
}

Chaque règle possède encore une seule déclaration.

Nous allons maintenant poursuivre exactement à partir de cet état.

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

- Une règle CSS peut-elle contenir plusieurs déclarations ?
- Comment ajouter une nouvelle propriété dans un bloc existant ?
- Pourquoi chaque déclaration se termine-t-elle par un point-virgule ?
- Pourquoi vaut-il mieux regrouper les déclarations qui concernent le même sélecteur ?

À la fin de cette leçon, vous saurez enrichir une règle déjà présente dans votre feuille CSS sans dupliquer inutilement le sélecteur.

1. Reprendre la règle .nom-site

Nous avons actuellement :

.nom-site {
    color: darkslateblue;
}

Cette règle contient :

.nom-site

comme sélecteur,

et :

color: darkslateblue;

comme déclaration.

Jusqu’à présent, nous avons utilisé une seule déclaration par règle afin de découvrir les notions progressivement.

Mais une règle CSS peut en contenir plusieurs.

2. Ajouter une deuxième déclaration

Nous allons conserver la couleur du nom du site et modifier également l’épaisseur visuelle de son texte.

Pour cela, nous allons découvrir une nouvelle propriété :

font-weight

La propriété

font-weight

permet de contrôler l’épaisseur du texte.

Nous allons utiliser la valeur :

bold

qui demande un texte en gras.

La déclaration complète est donc :

font-weight: bold;

Ajoutez-la dans la règle

.nom-site

.

Vous obtenez :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Enregistrez

styles.css

, puis actualisez l’une des trois pages.

Le texte :

Mon premier site HTML

doit conserver sa couleur et apparaître maintenant en gras.

3. Les deux déclarations appartiennent au même sélecteur

Reprenons :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Le sélecteur reste :

.nom-site

Il n’est écrit qu’une seule fois.

Entre les accolades, nous avons maintenant deux déclarations :

color: darkslateblue;

font-weight: bold;

Les deux s’appliquent aux éléments qui possèdent :

class="nom-site"

Nous pouvons donc lire la règle ainsi :

Pour les éléments ayant la classe nom-site :

- utiliser darkslateblue pour la couleur du texte ;
- utiliser bold pour l’épaisseur du texte.

4. Vérifier les trois pages

La classe

nom-site

est utilisée dans :

index.html
apropos.html
contact.html

Ouvrez successivement les trois pages.

Le texte :

Mon premier site HTML

doit maintenant utiliser les deux déclarations sur chaque page.

Nous n’avons modifié qu’un seul fichier :

styles.css

La modification se retrouve pourtant sur les trois pages parce qu’elles utilisent la même feuille de style.

Nous continuons donc à profiter de l’organisation mise en place dès la première leçon.

5. Comprendre la nouvelle propriété font-weight

Dans :

font-weight: bold;

la propriété est :

font-weight

La valeur est :

bold

Nous pouvons retenir :

font-weight = épaisseur visuelle du texte

bold = texte en gras

Cette propriété modifie la présentation du contenu.

Elle ne change pas le rôle HTML de l’élément.

Notre code reste :

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

Il s’agit toujours d’un paragraphe.

6. Le gras CSS ne remplace pas le sens HTML

Dans le cours HTML, vous avez appris que la structure et le sens du contenu doivent être exprimés avec les éléments adaptés.

La déclaration :

font-weight: bold;

ne signifie pas automatiquement :

ce contenu est important dans le sens du document

Elle signifie seulement :

présenter ce texte en gras

Si un contenu possède réellement une importance particulière dans le document, HTML doit continuer à exprimer cette information avec l’élément approprié.

CSS ne remplace donc toujours pas la structure HTML.

Nous retrouvons le principe appris depuis le début du cours :

HTML décrit le sens.

CSS contrôle la présentation.

7. Pourquoi ne pas répéter le sélecteur ?

Nous pourrions écrire :

.nom-site {
    color: darkslateblue;
}

.nom-site {
    font-weight: bold;
}

Le navigateur pourrait appliquer les deux règles au même élément.

Mais ici, les deux déclarations concernent exactement le même sélecteur et appartiennent au même besoin de présentation.

Il est plus clair d’écrire :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Nous évitons ainsi de répéter inutilement :

.nom-site

et nous regroupons au même endroit les propriétés qui présentent le nom du site.

8. Une déclaration par ligne

CSS permettrait d’écrire :

.nom-site { color: darkslateblue; font-weight: bold; }

Cette écriture peut fonctionner.

Mais elle devient rapidement moins agréable à lire lorsque les règles contiennent plusieurs propriétés.

Nous utiliserons donc plutôt :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Chaque déclaration possède sa propre ligne.

Cette organisation facilite :

- la lecture ;
- la modification ;
- la recherche d’une erreur ;
- l’ajout d’une nouvelle propriété.

Nous conserverons cette présentation dans la suite du cours.

9. Le rôle du point-virgule

Regardez les deux déclarations :

color: darkslateblue;
font-weight: bold;

Chacune se termine par :

;

Le point-virgule indique la fin d’une déclaration.

Lorsque plusieurs déclarations se suivent, il permet de les séparer clairement.

Nous pouvons retenir :

propriété: valeur;
propriété: valeur;

Dans notre règle :

color: darkslateblue;
font-weight: bold;

le navigateur peut ainsi distinguer les deux déclarations.

10. Que se passe-t-il si un point-virgule manque ?

Regardons cette écriture :

.nom-site {
    color: darkslateblue
    font-weight: bold;
}

Il manque le point-virgule après :

darkslateblue

Le navigateur ne peut plus interpréter correctement cette partie comme deux déclarations séparées.

La bonne écriture est :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Lorsque vous ajoutez une déclaration, vérifiez donc toujours que la ligne précédente se termine correctement.

11. Garder également le point-virgule sur la dernière déclaration

Dans certains cas, CSS peut accepter l’absence de point-virgule après la dernière déclaration d’un bloc.

Nous prendrons néanmoins l’habitude de l’écrire.

Nous préférons :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

à :

.nom-site {
    color: darkslateblue;
    font-weight: bold
}

Cette habitude rend le fichier plus régulier.

Elle évite également d’oublier un point-virgule si nous ajoutons une nouvelle déclaration plus tard.

12. Ajouter temporairement une troisième déclaration

Nous allons maintenant faire une petite expérience afin de vérifier que vous avez compris le principe.

Nous allons découvrir une autre propriété :

background-color

La propriété

background-color

permet de définir une couleur d’arrière-plan.

Ajoutez temporairement :

background-color: lavender;

La règle devient :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
    background-color: lavender;
}

Enregistrez puis actualisez une page.

Le nom du site doit maintenant conserver :

- sa couleur de texte ;
- son texte en gras ;
- un arrière-plan clair.

Les trois déclarations appartiennent toujours au même sélecteur.

13. Retirer la déclaration temporaire

Cette expérience servait uniquement à vérifier que vous savez ajouter une nouvelle déclaration dans un bloc existant.

Retirez maintenant :

background-color: lavender;

Nous conservons pour la suite :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Nous étudierons les couleurs et leurs contrastes de manière plus approfondie dans la suite du cours.

Pour le moment, notre objectif reste de comprendre la structure d’une règle contenant plusieurs déclarations.

14. Ajouter une propriété sans réécrire toute la règle

Supposons que nous partions de :

.nom-site {
    color: darkslateblue;
}

Pour ajouter

font-weight

, nous n’avons pas besoin de créer une deuxième règle.

Nous plaçons simplement une nouvelle déclaration avant l’accolade fermante :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

C’est la méthode que nous utiliserons désormais.

Lorsqu’une nouvelle propriété concerne le même sélecteur, nous pouvons l’ajouter dans le bloc existant.

15. Ne pas placer une déclaration en dehors des accolades

Cette écriture est incorrecte :

.nom-site {
    color: darkslateblue;
}

font-weight: bold;

La déclaration :

font-weight: bold;

se trouve en dehors du bloc.

Elle n’appartient donc pas à la règle

.nom-site

.

La bonne écriture est :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Les déclarations d’une règle doivent rester entre son accolade ouvrante et son accolade fermante.

16. Relire notre feuille styles.css

À la fin de la leçon, votre fichier peut contenir :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Les deux premières règles possèdent encore une seule déclaration.

La règle :

.nom-site

en possède maintenant deux.

Nous avons donc fait évoluer la feuille CSS sans changer de projet et sans supprimer les règles apprises précédemment.

17. Lire la règle .nom-site avec méthode

Prenons :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Nous pouvons la décomposer ainsi :

.nom-site = sélecteur

{ } = bloc de déclarations

color: darkslateblue; = première déclaration

font-weight: bold; = deuxième déclaration

Chaque déclaration contient à son tour :

propriété: valeur;

Nous pouvons maintenant lire une règle CSS contenant plusieurs propriétés sans la considérer comme un bloc mystérieux.

18. Préparer la suite du cours

Nous savons maintenant :

- choisir les éléments concernés par une règle ;
- utiliser un sélecteur d’élément ;
- utiliser une classe ;
- ajouter plusieurs déclarations dans une même règle.

Nous allons pouvoir commencer à travailler plus précisément sur la lisibilité du texte.

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

styles.css

Nous introduirons progressivement de nouvelles propriétés typographiques afin d’améliorer la présentation du site sans modifier sa structure HTML.

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

Vous devez maintenant être capable d’expliquer :

- qu’une règle CSS peut contenir plusieurs déclarations ;
- pourquoi les déclarations placées dans un même bloc concernent le même sélecteur ;
- le rôle de

font-weight

;
- ce que signifie la valeur

bold

;
- pourquoi le gras CSS ne remplace pas le sens HTML ;
- pourquoi chaque déclaration se termine par un point-virgule ;
- pourquoi nous écrivons une déclaration par ligne ;
- pourquoi il est inutile ici de répéter plusieurs fois le même sélecteur ;
- pourquoi une déclaration doit rester à l’intérieur des accolades.

Retenez surtout :

un sélecteur peut contenir plusieurs déclarations

chaque déclaration suit la forme :

propriété: valeur;

Dans la prochaine leçon, nous conserverons cette organisation et nous commencerons à construire une base typographique plus lisible pour l’ensemble du petit site.

Reprenons la règle créée dans la leçon précédente :

.nom-site {
    color: darkslateblue;
}

Le même élément existe dans les trois pages :

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

Nous pouvons enrichir la règle sans créer un nouveau sélecteur :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

La première déclaration :

color: darkslateblue;

définit la couleur du texte.

La deuxième :

font-weight: bold;

présente le texte en gras.

Les deux déclarations s’appliquent aux éléments qui possèdent :

class="nom-site"

dans :

index.html
apropos.html
contact.html

La structure HTML reste inchangée.

Nous avons simplement ajouté une deuxième propriété à la règle CSS déjà utilisée.

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

styles.css

.

1. Reprendre la règle existante

Votre feuille contient déjà :

.nom-site {
    color: darkslateblue;
}

Ne créez pas une deuxième règle

.nom-site

.

2. Ajouter font-weight

Dans le même bloc, ajoutez :

font-weight: bold;

Vous obtenez :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Enregistrez puis actualisez les trois pages.

Vérifiez que :

Mon premier site HTML

conserve sa couleur et apparaît maintenant en gras.

3. Tester une troisième déclaration

Ajoutez temporairement :

background-color: lavender;

La règle devient :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
    background-color: lavender;
}

Enregistrez puis actualisez une page.

Observez que les trois déclarations peuvent être appliquées par le même sélecteur.

Retirez ensuite :

background-color: lavender;

afin de revenir à :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

4. Vérifier le point-virgule

Regardez chaque déclaration et vérifiez qu’elle se termine par :

;

5. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. pourquoi nous n’avons pas créé une deuxième règle

.nom-site

;
2. ce que fait

font-weight

;
3. ce que signifie

bold

;
4. pourquoi

font-weight: bold;

ne transforme pas le paragraphe en contenu sémantiquement important ;
5. à quoi sert le point-virgule entre plusieurs déclarations ;
6. pourquoi les déclarations doivent rester entre les accolades.

Une règle CSS peut contenir plusieurs déclarations.

Dans notre petit site, nous avons fait évoluer :

.nom-site {
    color: darkslateblue;
}

en :

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Le sélecteur :

.nom-site

n’est écrit qu’une seule fois.

Les deux déclarations se trouvent entre les mêmes accolades.

Chaque déclaration suit la structure :

propriété: valeur;

Nous avons également découvert :

font-weight

qui contrôle l’épaisseur visuelle du texte.

Avec :

font-weight: bold;

le texte est présenté en gras.

Cette présentation ne remplace pas le sens exprimé par HTML.

Nous écrivons une déclaration par ligne et nous terminons chaque déclaration par un point-virgule afin de conserver une feuille CSS claire et facile à modifier.

Dans la prochaine leçon, nous continuerons avec le même site et la même feuille

styles.css

pour commencer à améliorer la typographie et la lisibilité du texte.