Les feuilles de style (5/8)

Identifier des éléments particuliers

Maintenant, vous connaissez les propriétés les plus fréquemment utilisées. Vous savez redéfinir l'apparence de certaines balises HTML. Mais comment faire si vous voulez définir l'apparence de certaines parties de votre document ? C'est ce que nous allons voir maintenant.

 

Petit retour au HTML : les attributs id et class

Vous savez comment redéfinir la présentation, par exemple, de tous les occurrences d'un élément. Par exemple, vous savez encadrer en rouge tous vos paragraphes <p>. Mais comment faire si vous voulez seulement qu'un ou deux paragraphes soient encadrés ?

Il suffit de dire que ces paragraphes appartiennent à une même classe d'élément, par exemple, la classe "important". On utilise pour cela l'attribut class dans le code HTML :

<p class="important">Ceci est un paragraphe important !</p>
<p>Ceci est un paragraphe normal.</p>
<p class="important">Ceci est un autre paragraphe important.</p>

Ensuite, vous pouvez définir l'apparence de tous les éléments appartenant à la classe "important" en mettant ceci dans votre fichier CSS :

.important {
	border:1px solid red;
	}

Notez bien la présence du point avant le mot "important" dans votre CSS, c'est important chichichi … Ainsi, tous les paragraphes auxquels vous avez affecté la classe "important" seront encadrés en rouge. Regardez notre exemple : nous avons affecté la classe "important" à un paragraphe et un titre, qui sont maintenant entourés de rouge.

 

Petite subtilité

Si vous voulez que vos paragraphes "important" soient entourés de rouge mais que vos titre <h3> "important" soient écrits en bleu, voici comment faire dans votre fichier CSS :

p.important {
	border:1px solid red;
}

h3.important {
	color:blue;
}

Ainsi l'encadré ne s'applique qu'aux balises <p> de classe "important", tandis que la police de couleur bleue ne s'applique qu'aux titres <h3> de classe "important" (en l'occurrence, la première sous-partie). Regardez notre page d'exemple pour vous en rendre compte. Dans notre cas, ce n'est pas très joli mais ça peut servir.

 

Mais id dans tout ça ?

Hé bien, il est là, juste sous le coude ! L'attribut id, c'est vraiment le frère de l'attribut class. Il fonctionne exactement pareil. À ceci près : id est un identifiant. Donc chaque id est unique dans le document, alors qu'avec class, comme ça indique une classe, c'est que plusieurs éléments y appartiennent. Accessoirement l'attribut id peut servir à d'autres petites subtilités que nous n'évoquons pas ici.

Concrètement dans votre document HTML, ça s'utilise comme ceci :

<p id="declarationdamour">Je t'aiiiime</p>

On ne peut donc avoir qu'un paragraphe avec l'id "declarationdamour" dans le document HTML. Autre petite différence, dans le CSS, au lieu de mettre un point devant le nom, on met un dièse #. Ça donne :

#declarationdamour {
	font-size: 150%;
	color: red;

}

Pas bien compliqué, donc. Maintenant nous allons voir comment nous pouvons utiliser cela pour améliorer la présentation de notre page HTML.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French