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 :

<p class="vert">


Ce paragraphe est de couleur verte.


</p>
<p class="rouge">


Ce paragraphe est de couleur rouge.


</p>

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 :

<h1 class="vert">Ce titre est coloré en vert</h1>
<p class="vert">


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


</p>

L'intérêt d'utiliser les classes c'est de pouvoir regrouper des propriétés de style dans une classe et d'appliquer ces styles à différents éléments, et en différents endroits. Définissons par exemple trois groupes de propriété :

• Premier groupe de propriété ou style : centré en bleu, avec des textes plus petits
• Deuxième groupe de propriété ou style : aligné à droite en rouge, avec des textes plus grands
• Troisième groupe de propriété ou style : normal en noir, avec des textes moyens.

Et mieux encore nous avons la possibilité de donner n'importe quel nom à notre classe à condition de bien respecter les règles de syntaxe (il ne doit pas contenir d'espace). Profitons alors de cette possibilité et donnons à nos classes des noms significatifs que l'on pourra retenir facilement.

Nous voulons par exemple assigner : aux remarques, le premier groupe de style, aux notes, le deuxième groupe de style et aux paragraphes normaux, le troisième groupe de style. On va créer trois classes :

• remarque pour dire qu'il s'agit d'une remarque
• note pour dire que c'est 'à noter'
• normal pour dire qu'il s'agit d'un paragraphe normal

Code CSS :

.remarque
{


font-size:small;
text-align:center;
color:blue;


}

.note
{


font-size: large;
text-align:right;
color:red;


}

.normal
{


font-size: medium;


}

Code XHTML :

<p class="remarque">


Ce paragraphe est une remarque.


</p>
<p class="note">


Ce passage est à noter. C'est quelque chose de très important donc à retenir.


</p>
<p class="normal">


C'est un paragraphe normal.


</p>

Les 3 éléments ont bien la même balise HTML ('p'), mais des styles différents, qui les présentent de manière différente.

Les id en CSS

Contrairement aux classes, un id s'applique à un objet unique. Il n'est pas possible d'avoir deux éléments de même id dans une même page. Autrement dit, si un élément XHTML possède déjà un id, cet id ne peut plus être utilisé pour un autre élément XHTML.

Alors qu'il est tout à fait possible que deux éléments utilisent la même classe, bien au contraire. La définition d'un ID en CSS est identique à celle d'une classe, excepté le dièse qui précède le sélecteur :

test-id
{
color :green ;
}

Comme pour la classe, pour appliquer le style à une balise div, on spécifie le nom de l'id comme valeur de l'attribut id :

<div id="test-id" >un exemple d'id</div>

Rappel : Il ne peut y avoir qu'un seul élément dont l'id est test-id dans la même page. On utilise généralement l'id pour placer des blocs dans une page (menu droit, menu gauche, contenu principal, etc...) . L'id peut aussi servir d'ancre nommée. Cela veut dire que si on est en bas de page, et qu'on veut y retourner rapidement en haut, il suffit de faire un lien sur la même page. L'id spécifie l'endroit où l'on doit se rendre.

Rappel pour renvoi vers une ancre :

<a href="#test-id">retour à test-id</a>

Pour plus d'explications, voir le chapitre sur les liens dans le tuto XHTML.