Personnaliser la couleur des liens avec les CSS

Pour personnaliser des liens, il n’est pas nécessaire d’utiliser Javascript. La balise <a> et les CSS sont suffisants.
Dans cet article, vous trouverez un petit tutorial sur les liens, les couleurs et  les CSS.  
Vous pourrez ainsi personnaliser vos menus, pour les liens non visités, visités et survolés et créer des effets sur ces liens.

Sommaire :

  • Les différents états d’un lien d’une balise <a>
  • La balise <a> et  les codes CSS pour personnaliser la couleur des liens.
  • Appliquer un CSS à une balise <a> avec un sélecteur. (à lire !)
  • Pour aller plus loin : personnaliser d’autres attributs texte d’un lien.
Balise CSS

Les différents états d’un lien d’une balise <a>

Un lien peut avoir 4 états différents :

  • non visité : link - visité : visited
  • survolé : hover
  • cliqué : active

link est l’état initial du lien, visited l’état après le clique, hover l’état lorsque la souris survole le lien et active est l’état au moment du clique.
On peut personnaliser à volonté ces quatre états par une couleur de texte ou de fond, ou bien en changeant n’importe quel autre attribut CSS s’appliquant au texte.

La balise <a> et  les codes CSS pour personnaliser la couleur des liens.

Pour donner des couleurs différentes aux liens selon leur état, on utiliser la feuilles de style suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css" \>
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
</style>

L’ordre dans lequel ces attributs sont déclarés doit être respecté. Les couleurs sont codées ici en hexadécimal, il suffit de les adapter pour votre usage.
Pour intéger ces CSS dans une page HTML, plusieurs méthodes sont disponibles pour insérer des css dans HTML Le lien concerné sera de la forme :

1
<a href="chemin/fichier.html" >Lien dont les couleurs du texte sont personnalisées</a>

Voici un exemple du code précédent :

Lien dont les couleurs du texte sont personnalisées

Le problème avec cette façon de faire, c’est que tous les liens des balises <a>  seront affectés par ces CSS. Comment y remédier ?

Appliquer un CSS à une balise <a> avec avec un sélecteur.

En réalité, dans cet article, je n’ai pas utilisé les codes précédents, sinon tous les liens auraient pris les mêmes couleurs et on n’aurait pas pu appliquer des styles différents aux deux liens des exemples.
Pour différencier les balises <a> entre elles et leur appliquer des CSS différents, on peut utiliser des sélecteurs de la façon suivante :

1
<center><a href="chemin/fichier.html" class="lien">Lien dont les couleurs du texte sont personnalisées</a></center>

Ce qui donne :

Lien dont les couleurs du texte sont personnalisées

Le code CSS s’écrit ainsi :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a.lien {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link.lien {
color: #ff5301;
}
a:visited.lien {
color: #437A16;
}
a:focus.lien {
border-bottom: 1px solid;
background: #11E498;
}
a:hover.lien {
background: #CDaaaa;
text-decoration: none;
}
a:active.lien {
background: #265301;
color: #CD11AA;
}

Il ne vous reste plus qu’à modifier les attributs css à votre guise/

Pour aller plus loin : personnaliser d’autres attributs texte d’un lien.

Dans cet article, nous nous sommes intéressés esseniellement aux couleurs <a> avec CSS.

Mais on pourrait personnaliser d’autres attributs comme ceux liés au texte.

En voici quelques exemples  pour information.
text-decoration : underline;  (pour souligner ou non)
font-weight:bold;   (texte en gras)
font-spacing:15px;  (écartement des lettres ) etc.

Pour compléter cet article, sachez qu’il est aussi possible de faire des 

effets javascript pour les liens.

A bientôt sur Outils Web:)

Partager