Cours CSS  – Les sélecteurs de type –

Les sélecteurs de type en CSS

Un sélecteur de type est un des moyens les plus simples pour appliquer un style. Il nous permet d’affecter un style à un élément XHTML. En spécifiant son nom, vous pouvez appliquer directement le style à une balise. Pour appliquer un style à la balise p par exemple on peut faire comme ceci :
p{
color : green
}
Les classes CSS
Dans le sélecteur de type, on n’a utilisé qu’un seul bloc de déclaration pour les paragraphes. Mais supposons que vous voulez définir 2 types de paragraphe : des paragraphes en vert et des paragraphes en rouge. Vous ne pouvez pas définir ces deux propriétés dans un même style. Cela est réalisable avec les classes. La première étape sera de définir 2 classes. Les noms des classes sont donc : .vert et .rouge et sont toujours suivis d’un point.
Code CSS :
p.vert{
color:green
}

P.rouge {
color : red
}

Pour appliquer ces styles aux documents XHTML, il suffit de mettre le nom de la classe comme valeur de l’attribut class.
Code XHTML :

Ce paragraphe est de couleur verte.

Ce paragraphe est de couleur rouge.

Nous pouvons aussi omettre le nom de la balise ( ‘p’ ) dans le sélecteur pour définir par exemple un style qui sera utilisé par d’autres balises XHTML. Dans l’exemple suivant, tout élément ayant comme classe .vert sera coloré en vert.
Code CSS :
.vert{
color:green
}
Code XHTML :

Ce titre est coloré en vert

Tout comme le titre ci-dessus, ce paragraphe est aussi de couleur verte.