Introduction aux évènements CSS

Ce chapitre va simplement se contenter de présenter cette facette du CSS en surface.

Je m’appuierai sur le code HTML suivant :

<main>
    <p id=testclic>Essai de cliquer sur moi !</p>
</main>

Les évènements

La notion d’évènement en CSS permet d’appliquer un style sur un élément seulement lorsqu’une action se produit sur lui. Ici, nous ne verrons que l’évènement «:active », qui se déclenche au clic de la souris sur l’élément cible.

Les évènements sont toujours précédés de « : ».

Par exemple, voici le code CSS qui va me permettre de rendre la couleur de texte de mon paragraphe rouge lorsque je clique dessus :

#testclic:active {
    color: red;
}

Mise en pratique !

Pour cet exercice, vous pouvez reprendre le code HTML que nous avons utilisé en exemple, ou bien créer vos propres éléments.

Voici les tâches que je vous demande de réaliser :

• Faites un paragraphe
• Faites un bouton qui, quand on clique dessus, double la taille du texte du paragraphe crée ci-dessus