Introduction La syntaxe des styles L'implantation des CSS Les classes et les Id Les unités utilisées Les couleurs Le positionnement CSS Les propriétés CSS

Il est parfois contraignant de toujours appliquer le même style à une balise. On peut avoir besoin de définir deux styles pour la même balise ou au contraire, définir un style pour une balise unique. C'est dans cette optique qu'ont été introduits les concepts de classes, de pseudo-classes et d'ID.

Les classes permettent de spécifier un style sur une ou plusieurs balises données. C'est grâce à un attribut "class" disponible dans chaque balise, et au nom de la classe utilisée que l'on spécifie si une balise adopte tel style ou tel style. Les classes n'ont rien de compliqué. Elles peuvent être nommée comme on veut (en respectant tout de même quelques règles élémentaires) et peuvent être utilisées sur n'importe quel balise dont le résultat est visible sur l'écran.

Les pseudo-classes sont spécifique à certaines balises et ne peuvent donc pas être utilisée sur les autres. Par contre elles sont déjà définies dans le CSS, il est donc impossible de les nommer soi-même et il n'y a pas d'attribut pour les spécifier (c'est automatique). On en distingue plusieurs :

• les pseudo-classes dynamiques,
• les pseudo-classes de lien,
• les pseudo-classes de texte

Les ID fonctionne comme des classes sauf qu'ils ne sont utilisable qu'une seule fois par document web. Comme les classes ils peuvent être nommés et sont utilisable sur toutes les balises dont le résultat est visible à l'écran. On l'utilise grâce à l'attribut "id".

Il est possible de combiner une classe avec une pseudo-classe ou un id avec une pseudo-classe de la manière suivante :
a.exemple:hover{/* Style */}
#unique:first-line{/* Style */}

Les classes :

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. Il doit commencer par une lettre et ne pas comporter d'espaces

Il est possible de définir des classes universelles en ne mettant pas de nom de balise devant le point.

Il est préférable de respecter la même étique que pour le nommage des fichiers. C'est à dire écrire le nom de la classe en minuscule sans caractères spéciaux ou accentués (bien qu'autorisé par le CSS). De plus, le nom de la classe doit être adapté à sa fonction.

Exemple
Fichier style.css
b.conseil{color:blue;}
Dans le document web
<b class="conseil">Texte</b>
Texte

Exemple
Fichier style.css
.important{color:red;}
Dans le document web
<b class="important">Texte</b>
Texte

Il n'a y pas de point lors de 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. Elles sont ajoutée à l'aide du caratère " : "

(*_*)

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 3 mais seulement 2 fonctionnent correctement :

• La pseudo-classe :hover permet d'affecter un style à la balise sélectionnée lors d'un survol par le curseur de la souris
• 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)
• 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). Cependant, elle ne fonctionne pas sur tous les navigateurs. Je ne l'ai donc pas développée ici.

Exemple :
Fichier style.css
a:hover{text-decoration:underline overline;}
textarea:focus{color:lime;}
Dans le document Web
<a href="#">Passer la souris sur ce lien</a>
<form action="cssclasseid.php" method="post">
<textarea name="exemple" cols="10" rows="2">Cliquer ici</textarea>
</form>
Passer la souris sur ce 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

Sur certains navigateurs, un lien peut être considéré comme non visité s'il n'est pas consulté pendant une longue période.

(*_*)

Les pseudo-classe 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 en existe deux :

• La pseudo-classe :first-line permet d'appliquer un style à la première ligne d'un paragraphe.
• La pseudo-classe :first-letter permet d'appliqer un style sur la première lettre du paragraphe.

Ceci est un paragraphe destiné à servir d'exemple. Pour que l'exemple soit concret, j'ai fait en sorte que le paragraphe soit assez loing pour tenir sur deux lignes. Ainsi, vous verrez mieux la différence entre la première et les autres lignes.

Les 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.

L'ID est semblable à une classe puisque la seule chose qui les différencie, mis à par son unicité dans un document web est le signe placé devant. En effet, un ID est déclaré grâce à un dièse (#).

Exemple
Fichier style.css
b#unique1{color:blue;}
Dans le document web
<b id="unique1">Texte</b>
Texte

Exemple
Fichier style.css
#unique2{color:red;}
Dans le document web
<b id="unique2">Texte</b>
Texte

Notez l'absence du point ou du dièse lors de l'appel.

Les balises <span> et <div> :

Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <span> et <div>.

La balise <span> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec "id" qu'avec "classe". Sa syntaxe est la suivante :
<span class="conseil">Texte</span>

Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise <div> s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes. La syntaxe de la balise DIV est la suivante :
<div class="important">paragraphes</div>

Les balises <div> définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts. Le standard CSS propose un certain nombre de propriétés permettant de contrôler précisément les différentes marges. Une bonne maîtrise de ces propriétés permet de créer très facilement des interfaces relativement originales. Ce site utilise d'ailleurs cette façon de procéder. En effet une balise <div> unique, dont les marges sont définies dans une feuille de style externe, encadre tout le contenu du site et permet par conséquent de le centrer.