Appliquer un style : class et id

Parent Previous Next


Appliquer un style : class et id



On peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :



Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.


<h1 class="Big_Ben"> </h1>

<p class="Big_Ben"> </p>

<img class="Big_Bob" />


Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.

Par exemple, je vais associer la classe introduction à mon premier paragraphe (ligne 12) :


<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Premiers tests du CSS</title>

    </head>

 

    <body>

        <h1>Mon super site</h1>

         

        <p class="introduction">Bonjour et bienvenue sur mon site !</p>

        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>

    </body>

</html>


Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en bleu ».

Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous :


.introduction

{

    color: blue;

}


Testez le résultat : seul votre paragraphe appelé introduction va s'afficher en bleu (figure suivante) !


Seul le premier paragraphe s'affiche en bleu



Et l'attribut id alors ?

Lui, il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code.

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du JavaScript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo :


<img src="images/logo.png" alt="Logo du site" id="logo" />


Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :


#logo

{

    /* Indiquez les propriétés CSS ici */

}


Je ne vous propose pas de le tester, cela fonctionne exactement comme class.


Si vous vous emmêlez les pinceaux entre class et id retenez que deux balises peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être unique dans la page HTML.


Les balises universelles


Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises.

En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant :


<p>Bonjour et bienvenue sur mon site !</p>


Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :


Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de « bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !


<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>

.salutations

{

    color: blue;

}


Vous pouvez voir le résultat à la figure suivante.


Le mot « bienvenue » est écrit en bleu


Encore un petit effort, c'est par là

Créé avec HelpNDoc Personal Edition: Environnement de création d'aide complet