• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/11/2024

Créez des apparences dynamiques

Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée ; et tout cela grâce aux pseudo-classes.

Stylisez un élément au survol de la souris avec :hover

La pseudo-classe :hover s'applique lorsque l'utilisateur survole un élément avec sa souris (:hover  signifie d'ailleurs “survoler”), et va nous permettre d'y appliquer un style.

Déclarez le sélecteur sur lequel le style va s'appliquer

Prenons un exemple où on applique du style sur les liens hypertextes. Pour déclarer un style qui va "s'activer" dès que le visiteur du site web va pointer la souris dessus, on doit écrire notre CSS comme ceci :

a:hover {
// Insérer ici les propriétés CSS à appliquer
}

D'où il sort ce  a  qu'on a mis avant la pseudo-classe  :hover  ?

Rappelez-vous le chapitre "Créez un lien hypertexte", c'est comme ça qu'on annonce un lien hypertexte, avec une balise  <a>  . On pourrait très bien appliquer un style au survol d'un paragraphe (on écrirait alors p:hover), ou bien d'un élément auquel on a attribué une classe ma-classe (et on écrirait .ma-classe:hover).

À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de limite.

Définissez le style qui va s'appliquer au sélecteur

Dans le bout de code ci-dessous, on va appliquer une couleur différente pour le titre, le paragraphe, et à l'élément de la classe  mon-element .

On a la structure suivante en HTML :

<body>
    <div class="mon-element">
    <h1>Ma page de pseudo-classes</h1>
    <p>Les pseudo-classes sont très importantes afin de créer des apparences dynamiques en fonction des interactions avec les utilisateurs.</p>
    </div>
</body>

…et le code suivant en CSS :

.mon-element:hover {
    background-color: #BEAEE2;
    color: white;
}

h1:hover {
    color: #CDF0EA;
}

p:hover {
    color: #F9CEEE;
}

… ce qui nous donne :

Au passage de la souris, la couleur du fond et du texte change.

Stylisez un élément au moment du clic avec  :active

La pseudo-classe  :active  permet d'appliquer un style particulier au moment du clic.

Essayons de changer la couleur de fond du lien hypertexte lorsque l'on clique dessus. Pour l'occasion, on aura au préalable ajouté un lien hypertexte dans le bout de code HTML plus haut, et désactivé le changement de style de  mon-element  au  hover.

On écrit dans le fichier CSS :

a:active {
    background-color: #C1FFD7;
}

On a alors :

Au moment où on clique sur le lien, la couleur de fond du lien change.
Au clic de la souris

​​Stylisez un élément sélectionné par le visiteur avec :focus

Là, c'est un peu différent. La pseudo-classe  :focus  applique un style lorsque l'élément est sélectionné.

C'est-à-dire ?

On peut notamment utiliser la touche "tab" ⇥   du clavier pour déclencher le focus sur chacun des éléments.

Cette pseudo-classe pourra être appliquée à d'autres balises HTML que nous n'avons pas encore vues, comme les éléments de formulaires. Nous nous pencherons davantage sur le focus dans ce chapitre.

Dans notre bout de code CSS, on écrit :

a:focus {
    background-color: #FCFFA6;
}

Ce qui nous permet d'obtenir, avec la sélection depuis la touche "tab" du clavier : ⇥  

Stylisez un lien hypertexte déjà consulté avec  :visited

Il est possible d'appliquer un style à un lien hypertexte qui a déjà été "cliqué". Par défaut, le navigateur colore un lien en violet. Mais grâce à la pseudo-classe  :visited  , on peut changer ; même si, en pratique, sur les liens consultés, on ne change souvent pas grand-chose à part la couleur.

Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon différente qu'un lien hypertexte non cliqués, il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).

Dans notre exemple, on ajoute au code CSS :

a:visited {
    color: black;
}

La couleur est désormais la même, que le lien ait été visité ou non.

Tout cela semble un peu magique comme ça : il existe de nombreux sélecteurs, une grande quantité de propriétés CSS, permettant d'obtenir des effets particulièrement avancés (souvenez-vous du CSS Art).

Allez plus loin avec les sélecteurs avancés

En CSS, le plus dur est bien souvent de réussir à cibler l'élément dont on veut changer le style. Vous avez appris tout un tas de manières d'appliquer du style à des éléments, avec les sélecteurs et les pseudo-classes. Mais sachez que nous n'avons pas tout couvert dans cette partie. Vous avez eu un aperçu de la puissance des sélecteurs avec le combinateur de voisin direct (ou siblings) dans la vidéo d'introduction, mais il en existe d'autres. En voici quelques-uns :

Le sélecteur universel  *

Le sélecteur universel  *  sélectionne toutes les balises sans exception.

* {
/* Insérez ici votre style */
}

Le sélecteur d'une balise contenue dans une autre :  A   B

Prenons un exemple avec ce code écrit dans le fichier HTML :

<h3>Titre avec <em>texte important</em></h3>

Dans CSS, on écrirait alors :

h3 em {
/* Insérez ici votre style */
}

Ce morceau de code signifie en français :

"Applique ce style à toutes les balises  <em>  situées à l'intérieur d'une balise  <h3>  ".

Le sélecteur d'une balise qui en suit une autre : A  +  B

Dans CSS, on écrirait par exemple :

h3 + p {
/* Insérez ici votre style */
}

Ce qui aura pour résultat de sélectionner la première balise  <p>  située après un titre  <h3>.

Exemple de code HTML associé :

<h3>Titre</h3>
<p>Paragraphe</p>

Le sélecteur d'une balise qui possède un attribut : a[attribut]

a[title] {
/* Insérez ici votre style */
}

En français, ce morceau de code signifie :

"Sélectionne tous les liens hypertexte   <a>  qui possèdent un attribut  title  ".

Exemple de code HTML associé :

<a href="http://site.com" title="Infobulle">

Il existe des variantes de cette forme de sélecteur :

  • a[attribut="Valeur"]  : une balise qui possède un attribut et une valeur exacte, comme :

a[title="Cliquez ici"] {
/* Insérez ici votre style */
}

C'est la même chose, mais l'attribut doit en plus avoir exactement pour valeur “Cliquez ici”.

Exemple de code HTML associé :

<a href="http://site.com" title="Cliquez ici">
  • a[attribut*="Valeur"]  : une balise, un attribut et une valeur, comme :

a[title*="ici"] {
/* Insérez ici votre style */
}

Idem, l'attribut doit cette fois contenir dans sa valeur le mot “ici” (peu importe sa position).

Exemple de code HTML associé :

<a href="http://site.com" title="Quelque part par ici">

À vous de jouer !

C'est le moment de mettre en pratique pour le site de Robbie Lens ce que vous venez d'apprendre, en ajoutant des apparences dynamiques !

Pour cette étape, vous devrez :

  • souligner les liens au survol ;

  • permettre aux liens ayant la classe "cta" d'avoir un dégradé de la couleur  #696484  à la couleur  #8788BA  au survol (attention, ceux-ci ne sont pas soulignés au survol) ;

  • dans les icônes de l'en-tête et du pied-de-page qui permettent de faire des liens, réduire l'opacité à 0.5 au survol.

En résumé

  • En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certaines interactions se produisent. On utilise pour cela les pseudo-classes.

  • La pseudo-classe  :hover   modifie l'apparence d'un élément au survol (par exemple : a:hover  modifie l'apparence des liens hypertextes lorsque la souris pointe dessus).

  • La pseudo-classe  :active  modifie l'apparence des liens hypertextes au moment du clic.

  • La pseudo-classe :visited modifie l'apparence des liens hypertextes lorsqu'un lien a déjà été visité.

  • La pseudo-classe  :focus  modifie l'apparence d'un élément sélectionné via la touche "tab".

  • Encore aujourd'hui, certaines propriétés ne sont pas totalement reconnues par tous les navigateurs.

Bien ! Vous commencez à vous débrouiller en CSS, mais vos pages restent encore assez désordonnées. Dans la prochaine partie, vous allez apprendre à créer de véritables mises en page à l'aide du CSS. Mais avant cela, vous allez pouvoir tester vos connaissances dans le quiz. Alors à tout de suite !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite