Affichage du tutoriel
 Tutoriaux
> Programmation > CSS > Les cours > Classes, ID, et propriétés |
Classes, ID, et propriétés
Comme vous l'avez vu dans les chapitres précédents, pour appliquer un style à une balise, il suffit d’utiliser un sélecteur. Mais comment faire si je veux un style appliqué sur un paragraphe en particulier et pas à tous ?
C'est simple les classes et les id vous apportent les solutions, explications.
Chapitre 1 : Les classes
Pour utiliser les classes, il faut mettre dans votre HTML la propriété class, ainsi qu’un nom attribué à celle-ci.
Au niveau de la syntaxe dans ma feuille de style, je précède le nom de la class par un point (.).
Par exemple je souhaite appliquer à mon paragraphe une couleur rouge. Dans les styles la couleur rouge est définie par la classe rouge.
Dans mon HTML, j’aurai :
Code :
<p class=’rouge’>Mon paragraphe est rouge </p>
Dans ma feuille de style CSS :
Code :
.rouge {
color : red ;
}
Les classes peuvent être répétées plusieurs fois dans le même document.
Chapitre 2 : Les ID
Il est basé sur le même principe que les classes, cependant il n’est pas possible de l’utiliser plus d’une fois dans la page HTML.
Pourquoi utiliser des ID ?
Les id sont beaucoup utilisés pour les éléments de structure du site. Ils servent aussi à l’utilisation du javascript avec des feuilles de style, le DHTML.
Si par exemple à l’aide du javascript je veux changer le style d’un bouton au survol, et bien j’agis sur ce bouton grâce à l’ID que j’aurai récupéré dans mon script.
Au niveau de la syntaxe, dans le HTML je donne un Id à la balise à l’aide de la propriété id et je lui donne un nom :
Code :
<div id=’menu’></div>
Dans la feuille de style, il ne s’agit pas d’un point (.) comme les classes mais d’un dièse (#).
Code :
#menu {
float :left ; /*je mets la division menu en flottant gauche*/
margin :10px 0 0 0 ; /* j’applique une marge en hauteur de 10 pixels et 0 pour droite bas gauche */
font-size:10px; /* je décide de mettre une taille de 10px à la police de la division*/
}
Si à l’heure actuelle, vous ignorez le sens du mot javascript, et bien utilisez les id pour vos éléments de structure unique, comme un menu, un pied de page ou un header.
Conlusion
Après avoir pris connaissance des bases du HTML, il ne vous reste plus qu’à connaître les différentes propriétés et valeurs possibles.
Vous trouverez toutes les propriétés à l’adresse suivante :
http://fr.selfhtml.org/css/proprietes/
Les prochains tutoriaux seront plus concrets, et nous estimerons que vous n’avez aucune lacune sur les sujets abordés dans ces premiers didacticiels.
Commentaires
| Tutoriaux
> Programmation > CSS > Les cours > Classes, ID, et propriétés |