CSS: Utilisation des sélecteurs class et id en css

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

Somaire

Utilisation des class et id

HTML & CSS

Nous voulons que certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente des autres ? Pour faire cela on utilise des attributs spéciaux qui fonctionnent sur toutes les balises :
• L'attribut class
• L'attribut id

les attributs class et id sont presque identiques. Une petite différence que vous trouverez par la suite.

Pour le moment, intéressons nous seulement à l'attribut class.

L'attribut class

C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image etc...
<h1 class="nom-de-la-class"> </h1>
<p class="nom-de-la-class "></p>
<img class="nom-de-la-class" />
Les class permettent de définir un style personnalisé.
Si on veut définir un style qui écrive le texte en rouge / 24 pixels. Nous l'appellerons par exemple " rouge14" et l'attribut class=" rouge14" doit être ajouté à chacune des balises que vous voulez dans ce style.
Le code ci après et le code du fichier essai.html que nous avons créé et modifier tout au long de notre cours.
J'ai y ajouté un contenu texte .
Je vais y ajouter les modifications de class suivante:
A un paragraphe je vais demander qu'il soit écrit en rouge 24 pixels, j'ajoute donc ma classe rouge14 dans la balise <p> que je désire comme suit:
<p class="rouge14">
Code : HTML

Sélectionner le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
   <title> Mon site !</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css"  title="Essai" href="essai.css" />
</head>
<body>
	<h1><em>Toto</em> à l'église </h1>
	<p> Toto est à l'église et il se balance sur sa chaise, sa maman lui dit alors : <br />
	- Arrête le petit Jésus va te voir ! <br />
	Toto: <br />
	- Mais ou est-il ? <br />
	- Il est au ciel ! <br />
	- T'inquiète pas maman, <em> il ne me verra pas grâce au plafond </em>  !!. <br />
	 </p>
	<p class="rouge14">
	François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br />
	quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q> 
	</p>
	<p>Voici une citation de Graham Greene :</p>
</body>
</html>
	
 

Ne vous préoccupez pas du texte écrit dans les paragraphes du code précédent c'est juste pour remplir mais regardez surtout les balises et attributs c'est ce qui nous intéresse. à partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class=" rouge14" soient écrits en rouge / 24 pixels" ? C'est simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), je doit écrire un point suivi du nom de la class, comme par exemple :
. rouge14
Ce qui nous donnerait le CSS suivant :
Code : CSS

Sélectionner le code

	.rouge14
	{
	   color: red; 
	   font-size: 24px; 
	}
	
 

Ajoutez ce code au fichier essai.css enregistrez et Testez la page XHTML, et voyez comment la class "rouge14" que nous avons créée modifie le texte.

L'attribut id

Lui, il fonctionne exactement de la même manière que class, mais chaque id ne peut être utilisé qu'une fois dans une page web et c'est là la différence avec l'attribut class.
Cela vous sera utile si vous faites du Java script plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour les ancres).
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page.

" id="nom-de-l'id"

Dans le CSS, ce n'est pas un point que vous mettez avant le nom de l'id, mais un dièse (#) :
Code CSS

Sélectionner le code

	 # nom-de-l'id
	{
	   /* Mettez les propriétés CSS ici  comme pour class*/
	}
	
 
Remarque: Si nous voulons utiliser un style sur plusieurs éléments dans une page Web, alors nous utiliserons l’attribut class sur ces éléments.
Mais si nous voulons que ce style soit appliqué spécialement sur un seul élément dans notre page Web nous utiliserons l’attribut id .

Autre chose, l’attribut id sert aussi à d’autres taches, comme pour définir une ancre dans une page Web.

Les balises universelles

Parfois vous avez besoin d'appliquer un style (une class ou un id ) à certains mots qui ne sont pas entourés par des balises.
Le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez en mettre que dans une balise.
Par exemple, si je ne veux modifier que " François René " dans le paragraphe suivant :
Code : HTML

Sélectionner le code

	<p class="rouge14">
	François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br />
	quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
	</p>
	
 

C'est facile à faire s'il y avait une balise autour de " François René ", mai il n'y en a pas. Alors on a inventé 2 balises qui ne servent à rien, avec une petite différence entre les deux :
• <span> </span> : c'est une balise de type inline. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour mettre en forme François René
• <div> </div> : c'est une balise de type block au même titre que <p>, <h1> etc...
Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne avant et aprés. C'est une balise très utilisée pour faire un design. Nous lui dédierons d'ailleurs une partie entière dans notre cours pour apprendre à construire le design de votre site Web.
Ces deux balises sont dtes balises universelles.
Et dans notre cas c'est la balise <span> </span> qui nous intéresse cette balise sert pour appliquer un style à une partie d'un texte.
pour en savoir plus sur cette balise voir notre référence.

Sélectionner le code

	<p class="rouge14">
	<span class="nom">François René</span>, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br />
	quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
	</p>
	
	
 

Code : CSS

Sélectionner le code

.nom{
		color: green; 
}
	
 

Imbrications de balises

Dans le fichier CSS. Nous souhaiterions définir un style uniquement pour les balises qui se trouvent à l'intérieur d'une autre.par exemple les balises <em> qui se trouvent à l'intérieur d'un titre <h1>.On écrit ceci :
Code : CSS

Sélectionner le code

	h1 em 
	{
	font-size: 24px; 
	   color: brown; 
	}
	
 

Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace.
Cela signifie "Je veux modifier le style de toutes les balises <em> situées à l'intérieur de titres <h1>".
On a indiqué dans le CSS dans quel ordre devaient imbriquées les balises.

Attention !

L'ordre est très important ! Si vous aviez mis "em h1" cela aurait voulu dire "Tous les <h1> situés à l'intérieur de balises <em>"
Vous pouvez aussi imbriquer des balises et des class :

p rouge14

Ce qui signifie : "Toutes les class "rouge14" contenues dans des balises <p>"

Par carabde 10 mars 2014

chapitre précédent chapitre suivant