Les classes de style (CSS)

Les classes et les ID

Les classes

Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.

La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :

Selecteur_de_balise.Nom-de-la-classe {
			propriété de style: Valeur;
			propriété de style: Valeur;
			...;

Où « Nom-de-la-classe » représente le nom donné à la classe.

Appel d'une classe

Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :

Soit la classe Rouge appliquée à la balise b :
B.rouge {font: Verdana 12px; color: #FF0000; }

L'appel à cette classe dans le code se fera de la façon suivante :

<B class="Rouge"> Texte à mettre en rouge et en gras </B>


Les classes universelles

Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens !
On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point :

.Nom-de-la-classe {propriété de style: Valeur; propriété de style: Valeur ...}

Soit la classe « important » suivante :

.important {font-type: arial; color: red; font-weight: bold}

L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide :

<h1 class="important">Attention ceci est un avertissement</h1>
<i class="important">(prière d'en tenir compte)</i>

Notez l'absence de point dans l'appel à la classe.

Les pseudo-classes

Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises.

Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer ses propres pseudo-classes. Il existe plusieurs types de pseudo-classes :



Les pseudo-classes dynamiques

Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un événement (mouvement de la souris, clic, ou bien appui sur une touche du clavier). Il en existe trois :

  • La pseudo-classe :hover permet d'affecter un style à la balise sélectionnée lors d'un survol par le curseur de la souris :
    A:hover {font-decoration: underline;}
  • La pseudo-classe :focus permet de définir un style à la balise sélectionnée lorsque le focus lui est donné (par exemple lors d'un clic dans un élément de formulaire) :
    TEXTAREA:focus {color: #FF0000;}
  • La pseudo-classe :active permet de définir un style à la balise sélectionnée lorsque l'utilisateur clique sur l'élément (entre le moment où l'utilisateur clique sur le bouton de la souris et celui où il le relâche) :
    A:active {color: #FF0000;}

Les pseudo-classes dynamiques ne sont pas reconnues de la même façon par tous les navigateurs.

Les pseudo-classes de lien

Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise <A> :

  • La pseudo-classe :link permet de définir le style des liens hypertextes n'ayant pas encore été consultés par le client
  • La pseudo-classe :visited permet de définir le style des liens hypertextes que le client a déjà visités

Il est possible que certains navigateurs considèrent un lien comme n'ayant pas été visité s'il n'est pas consulté pendant une longue période de temps.

La pseudo-classe descendante

Une pseudo-classe descendante permet d'appliquer un style à la première balise au sein d'un élément. La syntaxe de cette pseudo-classe est la suivante :

Element_Parent > Balise:first-child {style;}

Ainsi la déclaration suivante s'applique à la première balise <A> situé dans un jeu de balises <P> </P> :

P > A:first-child {color: #00FF00;}
<P align="justify">
  <A href="http://www.commentcamarche.net">CCM</A>
  </P>

La balise <A> suivante ne sera par contre pas prise en compte car elle n'est pas la première balise après la balise <P> :

<P align="justify">
  <BR/<
  <A href="http://www.commentcamarche.net">CCM</A>
  </P>


Les pseudo-classes de texte

Les pseudo-classes de texte permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles ils s'appliquent. Ainsi les pseudo-classes de texte s'utilisent généralement conjointement avec la balise de paragraphe (<P>).

Il existe deux pseudo-classes de texte :

  • :first-line : permet d'appliquer un style à la première ligne d'un paragraphe.
  • P:first-line { text-transform: uppercase }
  • :first-letter : permet d'appliquer un style à la première lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant par exemple double la taille et met en gras la première lettre d'un paragraphe :
  • P:first-letter { font-size: 200%; font-weight: bold; }


Les pseudo-classes de langue

Il est possible de définir un style en fonction de la langue du document (spécifiée dans les en-têtes HTTP ou dans les balises méta) ou de la langue d'un élément HTML ou XML (spécifié grâce à l'attribut optionnel LANG) si celle-ci est précisée.

Une pseudo classe de langue utilise la notation suivante :

  • :lang(Langue). La pseudo classe de langue suivante permet de définir les guillemets selon la notation française
  • HTML:lang(fr) { quotes: '« ' ' »' }


Les pseudo-classes de page

Le sélecteur @page permet de modifier les définition de mise en page d'une page HTML (taille, marge, etc.) à l'impression, telles que les marges (margin-left, margin-top, margin-right, margin-bottom), la taille (size). Il faut alors imaginer la page web comme un ensemble de pages constituant un ouvrage papier.

Les pseudo-classes de page permettent ainsi de sélectionner les pages de gauche, de droite ou bien la première page d'un document.

Il existe différentes pseudo-classes de page :

  • @page:left : permet de définir les propriétés des pages de gauche.
  • @page:left { size: landscape; margin-left: 2cm; }
  • @page:right : permet de définir les propriétés des pages de droite.
  • @page:right { size:landscape; margin-left: 2.5cm; }
  • @page:first : permet de définir les propriétés de la première page d'un document.
  • @page:first { size: portrait;
    			margin-left: 2.5cm;
    			margin-right: 2cm;
    			margin-bottom: 1cm;
    			margin-top: 4cm;}


Les sélecteurs d'ID

Le sélecteur d'ID (identifiant) permet de faire référence à un élément unique d'une page repéré par son identifiant. Les ID servent notamment à localiser des éléments HTML grâce au JavaScript.

La syntaxe d'un sélecteur d'ID est la suivante :

#nom_ID { style }

Un tel style s'appelle de la manière suivante :

<BALISE ID="nom_ID" > ... </BALISE>

Il ne peut exister qu'un seul ID par page ! Notez également l'absence de # dans l'appel au sélecteur d'ID.





Ce document intitulé «Les classes de style (CSS)» issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.