Utilisation des class et id en CSS

Hébergement de sites Internet


Recevez 1000 visiteurs par jour en provenance de Google
Téléchargez gratuitement notre guide explicatifgagner argent

Utilisation des class et id en CSS




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 des attributs: class et id.

Utilisation des class et id

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

utilisation des class et 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 " rouge24" et l'attribut class=" rouge24" 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.
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 rouge24 dans la balise <p> que je désire comme suit:
<p class="rouge24">
Code : HTML 

		<!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>Toto à l'église </h1>
	<p> Toto est à l'église et il se balance sur sa chaise, sa maman lui dit alors : 
	- Arrête le petit Jésus va te voir ! 
	Toto: 
	- Mais ou est-il ? 
	- Il est au ciel ! 
	- T'inquiète pas maman, <em> il ne me verra pas grâce au plafond </em>  !!. <br />
	 </p>
	<p class="rouge24">
	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>
	<blockquote>
	<p> 
	L'amour est fait du désir de comprendre et bientôt, <br /> 
	à force d'échecs répétés, <br />
	 ce désir meurt, <br />
	 et l'amour meurt aussi, <br />
	 à moins qu'il ne devienne cette , <br />
	affection pénible, cette fidélité, cette pitié.. 
	</p>
	</blockquote>
	<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 
	est le langage qui permet de créer un site Web. </p>
	<h1>source.html</h1>
	<p>Nous somme ici sur essai.html <br />
	Nous Souhaitons visiter essai2.html <a href="essai2.html">le fichier essai2.html</a>?</p>
	<p> Je connais un site super : le 
	<a href=" http://carabde.carrefourinternet.com">Site carrefourinternet</a><br />
	N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'œil </p>
	<p> visitez cette page  
	<a href=" http://www.opportunite-argent.com/index.php?ref=carabde">Page site carrefourinternet</a><br />
	N'hésitez pas ça vaut <em>vraiment</em> le coup  </p>
	<h2>Me contacter</h2>
	<p>Pour me contacter, <a href="mailto:carabde@hotmail.com">cliquez ici</a>!</p>
	  </body>
	</html>

Ne vous préoccupez pas du texte écrit dans les paragraphes du code précédent c'est juste pour remplir mai 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=" rouge24" 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 :
. rouge24
Ce qui nous donnerait le CSS suivant :
Code : CSS 

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

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

L'attribut id

Lui, il fonctionne exactement de la même manière que class, mai il ne peut être utilisé qu'une fois 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 

	 # nom-de-l'id
	{
	   /* Mettez les propriétés CSS ici  comme pour class*/
	}

Les balises universelles

Parfois vous avez besoin d'appliquer une class (ou un id mais c'est rare) à 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 

	<p class="rouge24">
	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 colorer François René
• <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc...
Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. 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.
Code : HTML 

	<p class="rouge24">
	<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 

		.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 <h3>.On écrit ceci :
Code : CSS 

	h3 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 <h3>". On a indiqué dans le CSS dans quel ordre
devaient être imbriquées les balises.

Attention !

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

p rouge24

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



Cours precedent:
cours precedent  Appliquer un style à des balises


Accueil du site

 Cours suivant:
Taille du texte    cours suivant



location serveurs hébergeur de sites internet en France










purchase text links



    Active Search Results     Référencé dans l'Annuaire Mirti          Image     annuaire de france