Les class et id, quelles diffÃ©rences ? - HTML/CSS

Explications des différences entre les deux, et comment y insérer du CSS.

Sur ce tutorial, je vais vous montrer la différence entre les class et les id, comme y mettre du css etc...

--------------------------------------------------------------------------------

Comme vous le savez peut-être, depuis quelques temps on utilise les "div" pour coder, c'est déjà plus propre que les tableaux, bien qu'on les utilise encore.

--------------------------------------------------------------------------------

Dans votre page Xhtml, vous y collez ceci, bon ok j'imagine que vous le saviez déjà mais bon.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AidoForum</title>
</head>
<body>
</body>
</html>

C'est entre body qu'on mettera nos textes etc...

Entre body vous allez mettre :

Code

<div id="test">Hello, ça va ?</div>

Dans votre CSS que vous incluerez avec ce code entre head et head :

Code

Dans votre css, vous y mettez le bla bla habituel...

Code

body {
background-color:#FFFFFF;
color:#000000;
margin:0px;
padding:0px;
}

Etc..

Ensuite notre id du div c'est : test.

Et quand c'est une ID, dans le css on ne mettera pas un point mais ceci : #
Donc si je veux rendre mon div plus beau je ferai :

Code

#test {
background-image:url(images/background-test.jpg);
color:#000066;
border:1px dotted;
border-color:#000066;
}

Attention:
Quand vous prennez les id il faut utiliser la même id une seule fois, sinon vous ne serez pas valide, et c'est-là qu'interviennent les class !

--------------------------------------------------------------------------------

Une class, ça se place comme ceci.

Code

<div class="Aidoforum">Hello les zamis</div>

Notre class se nomme : Aidoforum. Donc dans mon css je metterai ceci :

.Aidoforum {
background-image:url(images/background-test.jpg);
color:#000066;
border:1px dotted;
border-color:#000066;
}

La différence c'est qu'on utilise un point pour commencer et on peut réutiliser la même class plusieur fois et ce sera valide, ça évitera de rendre votre css trop lourd avec des id, les id, je les utilise pour le :

- Header : Haut de page.
- Menu : La navigation sur le site.
- Corps : Où il y a le texte.
- Footer : Le bas de page, les copyrights.

Si vous avez des suggestions pour le tutorial, mettez-les en commentaires.

A bientôt,
Orange Sourire

Par 1 , Le 09 Juin 2006 à 14h30
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Ajouter un commentaire

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

Lectures recommandées

Commentaires sur cet article

ju2cho7 - Le 02 Juillet 2006 à 18h05

plus pratique les tableaux Sourire

Pouzy - Le 24 Juin 2006 à 14h39

Hm, Aido est codé en tableaux, parce que j'avais commencé à le coder en CSS, mais impossible de trouver une compatibilité entre IE et Firefox, donc... Hop, tableaux. Sourire

Orgnobi - Le 24 Juin 2006 à 11h41

Dans le tutorial, Orange utilise les balises div mais il faut savoir que les id et les classes peuvent être appliquées à n'importe quelle balise xhtml.
Pour parler des tableaux, c'est vraiment pas propre de coder un design avec des tableaux. Ca peut paraitre pratique au debut mais des qu'il y a une modif à faire, c'est la vrai galère. Donc css power !!!