La personnalisation des liens avec CSS3

Nous avons déjà vu dans la première partie de ce tutoriel comment traiter les liens au sein d’une page HTML. Cette partie en est la suite, mais cette fois avec l’utilisation de CSS3. Ainsi le style de votre site reste cohérent. Le style que vous programmerez en CSS pourra ainsi s’appliquer à toutes vos balises a, vues dans la partie HTML.

La couleur des liens

Le but est de combiner les balises HTML 5 aux propriétés CSS 3.

Pour définir la propriété de style, vous avez la propriété de style color. Cette propriété vous permet de définir la couleur de vos liens.

Vous pouvez enlever le soulignement du lien avec text-decoration: none.

Dans l’exemple ci-dessous, le soulignement sur les liens est supprimé et la couleur de tous les liens est modifiée :

a:link {
  text-decoration: none;
  color: #084def;
  font-weight: bold;
}

Les infobulles sur les liens

Vous pouvez également utiliser l’attribut title avec du texte.

Cela permet d’ajouter une infobulle lorsque la souris passera au-dessus du lien. Tous les sites ne l’utilisent pas, cela dépend un peu de l’ergonomie, du design graphique que le webmaster a choisi.

Vous avez cet attribut title qui vous permet de rajouter une infobulle sur votre lien. Pensez à l’utiliser, en sachant que vous pouvez personnaliser title avec CSS.

En l’utilisant, vous ajoutez à votre site un caractère accessible, car le contenu de title est lu pour les personnes mal-voyantes.

Les liens sur les blocs

Grâce à HTML5, si vous avez un bloc div avec du texte, des images, vous pouvez carrément intégrer un lien sur ce bloc div. Tout simplement dans le code source, vous utilisez la balise a et dedans vous mettez votre balise div. Avec votre bloc de texte, cela va transformer votre bloc div avec votre texte en lien HTML. Très pratique aussi, vous allez sûrement l’utiliser très souvent.

Les différentes couleurs des liens

a:link permet de définir l’apparence d’un lien qui n’a pas encore été sélectionné. Vous pouvez définir une apparence différente quand le lien est visité, cliqué, non visité. Soit avec des tailles de polices différentes, soit avec une couleur différente, soit avec un text-decoration, souligner ou surligner ou barré.

En principe, les sites affichent un lien barré, un texte barré lorsque le lien a déjà été visité par l’internaute. Vous avez appris plus haut l’exemple a:link pour un lien qui n’a pas encore été parcouru par l’internaute.

Au contraire la balise a:visited va vous permettre de définir l’apparence d’un lien qui a déjà été cliqué :

/* lien déjà cliqué par l'internaute*/
a:visited { color:#FF8000; }

Vous avez également la balise a :hover qui vous permet de définir l’apparence du lien lorsque l’utilisateur avec sa souris passe au-dessus du lien, vous pouvez définir une apparence avec une taille différente, une couleur différente…

Exemple :

/* passage de la souris au dessus du lien */
a:hover{
   text-decoration: underline;
   color: #def125;
}

Les possibilités sont infinies !

Vous avez a:active qui permet de définir l’apparence d’un lien au moment où il est cliqué. Vous pouvez définir l’apparence du lien dès que l’utilisateur clique sur le lien :

/* état quand l'utilisateur clique le lien */
a:active { color: #29088A; }

Compléments

La propriété a:hover peut être utilisée sur les liens quand l’utilisateur passe sur un lien avec sa souris et aussi sur d’autres balises, sur d’autres éléments que les liens, comme les div par exemple. Vous faites div:hover avec background-color et dès que la souris passe au-dessus de la div, la couleur de la div change.

Exemple :

/* passage de la souris au dessus de la div */
div: hover { background-color: #DF01A5; }

Conclusion

CSS est un langage qui vous permet de personnaliser votre site dans les moindres détails, les liens hypertextes y compris.

Il est vraiment très simple dès lors de modifier l’apparence des liens pour qu’ils s’intègrent parfaitement à votre ergonomie.

---

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA