Le soulignement des liens hypertextes dans un document est considéré comme intrusif et inesthétique. Voilà pourquoi, certains auteurs préconisent de renvoyer les hyerliens après le texte : cette solution manque pourtant d’ergonomie pour les lecteurs, et est coûteuse en ressources.

Aussi préférons-nous colorer nos liens hypertextes. Le lecteur distingue instantanément la différence, sans être gêné dans dans le fil de la lecture.

Cependant, si nous décidons d’utiliser la couleur verte dans nos titres en incluant un lien hypertexte en rouge, le résultat ne sera pas fort heureux ! De même, si nous colorons les citations en bleu, un lien hypertexte s’y affichera en rouge… Comment y remédier ? Css permet aisément de répondre au problème et de contextualiser les hyperliens.

D’abord, déclarons la couleur de nos liens hypertextes pour l’ensemble du document…

a {
  color: red;
  text-decoration: none
}


Ensuite, déclarons la couleur de nos titres…

h1, h2, h3, h4, h5, h6 {
  color: green
}


Enfin, déclarons la couleur de nos citations…

blockquote, cite, q {
  color: blue
}


Faute d’avoir trouvé une solution plus congruente, nous avons décidé que les hyperliens contenus dans un titre ou une citation auraient la même couleur que le titre ou la citation, c’est-à-dire son parent. En revanche, ils seront soulignés pour être identifiables.

Le soulignement peut sembler discutable. On pourrait s’en passer pour des raisons visuelles, sachant que les liens conserveront leur valeur sémantique. Cependant, il nous semble dommage de priver le lecteur d’une information accessible, d’autant que cette contextualisation s’applique à des portions courtes de texte.

Ainsi…

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  border-bottom: 1px green solid; /* Nous préférons déclarer une bordure qu'un soulignement automatique dont le rendu est souvent trop proche du texte */
  color: green;
  text-decoration: none
}
blockquote a, cite a, q a {
  border-bottom: 1px blue solid;
  color: blue;
  text-decoration: none;
}


Sur ce principe, nous pouvons décliner à loisir l’apparence des hyperliens dans notre feuille de style.

Nous n’avons pas encore présenté les pseudo-classes link, visited, hover, active (LoVe HAte est un moyen mnémotechnique pour les retenir) : elles doivent être écrites dans cet ordre pour qu’elles fonctionnent, mais ne doivent pas forcément se suivre… contrairement à une opinion répandue ! Elles sont fort simples à utiliser…

a:link { /* apparence des liens actifs */
  color: green;
  text-decoration: none
}
a:visited { /* apparence des liens visités */
  color: yellow;
  text-decoration: none
}
a:hover { /* apparence des liens lors du survol avec la souris */
  border-bottom: 1px green solid;
  color: green;
  text-decoration: none;
}
a:active { /* apparence des liens lors du clic de la souris */
  color: green;
  text-decoration: none
}


Il suffit ensuite d’appliquer ces pseudo-classes une à une sur les éléments à personnaliser.

De la même façon, pouvons-nous personnaliser l’apparence de la balise acronym ou abbr (en Html 5, seule est valide la syntaxe abbr) selon le contexte, par exemple dans les titres…

h2 acronym, h2 abbr, h3 acronym, h3 abbr, h4 acronym, h4 abbr, h5 acronym, h5 abbr, h6 acronym, h6 abbr {
  border-bottom: 1px #green dotted;
  cursor: help
}


Voici un exemple tiré d’une feuille de style que nous utilisons en production.

a:link {
/* Cette feuille de style gagnerait à être simplifiée, mais elle est didactique */
  color: #770010;
  text-decoration: none
}
a:visited {
  color: #607800;
  text-decoration: none
}
a:hover {
  border-bottom: 1px #770010 solid;
  color: #770010;
  text-decoration: none
}
a:active {
  color: #770010;
  text-decoration: none
}
/****** Titres ******/
h1, h2, h3, h4, h5, h6 {
/* Couleur par défaut des titres */
  color: #607800
}
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
/* Liens actifs dans les titres */
/* Exemple. <h2><a href="http://www.idtgv.fr/" title ="aller sur le site Interactif Détente Tgv (s'ouvre dans une nouvelle fenêtre)\">iDTGV</a></h2> */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited , h5 a:visited , h6 a:visited {
/* Liens visités dans les titres */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
/* Liens visités lors du survol avec la souris dans les titres */
  border-bottom: 1px #770010 solid;
  color: #770010;
  text-decoration: none
}
h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
/* Liens lors du clic de la souris dans les titres */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h2.post_title a:link, h2.post_title a:visited, h2.post_title a:hover, h2.post_title a:active, h3.post_title a:link, h3.post_title a:visited, h3.post_title a:hover, h3.post_title a:active {
/* Liens dans les titres d'articles */
  border-bottom: none;
  color: #770010;
  text-decoration: none
}
h2.page_title a:link, h2.page_title a:visited, h2.page_title a:hover, h2.page_title a:focus, h2.page_title a:active {
/* Liens dans les titres d'articles */
  border-bottom: none;
  color: #770010;
  text-decoration: none
}
h1 acronym, h1 abbr, h2 acronym, h2 abbr, h3 acronym, h3 abbr, h4 acronym, h4 abbr, h5 acronym, h5 abbr, h6 acronym, h6 abbr {
/* Acronymes et abbréviations dans les titres */
/* Exemple. <h2><abbr title="Interactif Détente Tgv">iDTGV</acronym></h2> */
  border-bottom: 1px #607800 dotted;
  cursor: help
}
/****** Citations ******/
cite, q {
  color: #333333;
  font-style: normal;
  font-weight: 600 /* par défaut, la valeur 'bold' vaut 700 et 'normal' vaut 500
}
blockquote {
  color: #333333;
  font-style: normal;
  font-weight: 600;
  margin: 0 10px
}
h1 q, h2 q, h3 q, h4 q, h5 q, h6 q, h1 cite, h2 cite, h3 cite, h4 cite, h5 cite, h6 cite {
/* Citations dans les titres */
/* Exemple. <h2><q>Dormir nuit</q> déclare le marchand de sable</h2> */
  color: #607800;
  font-style: italic
}
blockquote a:link, cite a:link, q a:link {
/* Liens actifs dans les citations */
/* Exemple. <p><q>Je consulte fréquemment le site <a href="http://www.sncf.com/" title ="aller sur le site de la Société Nationale des Chemins de Fer Français">Sncf</a>.</q></p>*/
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:visited, cite a:visited, q a:visited {
/* Liens visités dans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:hover, cite a:hover, q a:hover {
/* Liens lors du survol avec la souris dans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:active, cite a:active, q a:active {
/* Liens lors du clic de la sourisdans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote em a:link, cite em a:link, q em a:link {
/* Liens actifs dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><q><em>Voyager avec la <a href="http://www.sncf.com/" title ="aller sur le site de la Société Nationale des Chemins de Fer Français">Sncf</a> ou <a href="http://www.airfrance.fr/" title ="aller sur le site d'Air France (s'ouvre dans une nouvelle fenêtre)">Air France</a></em> est une question récurrente</q>, explique-t-il.</p> */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic;
  text-decoration: none
}
blockquote em a:visited, cite em a:visited, q em a:visited {
/* Liens visités dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic;
  text-decoration: none
}
blockquote em a:hover, cite em a:hover, q em a:hover {
/* Liens lors du survol avec la souris dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic
}
blockquote em a:active, cite em a:active, q em a:active {
/* Liens lors du clic de la souris dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic
}
blockquote cite, q cite {
/* Citation courte incluse à une citation longue */
  font-style: italic;
  font-weight: bold
}
/****** Acronymes et abréviations ******/
acronym, abbr {
  border-bottom: 1px #000000 dotted;
  cursor: help
}
blockquote acronym, blockquote abbr, cite acronym, cite abbr, q acronym, q abbr {
/* Acronyme ou abréviation incluse à une citation */
/* Exemple. <p><q>Le <abbr title="Train à Grande Vitesse">Tgv</acronym> reste moins rapide que l'avion.</q></p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: normal
}
em acronym, em abbr {
/* Acronyme ou abréviation incluse à une citation lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><em>Le <abbr title="Train à Grande Vitesse">Tgv</acronym> est-il aussi rapide que l'avion ?</em>, se demande-t-il.</p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: italic
}
blockquote em acronym, blockquote em abbr, cite em acronym, cite em abbr, q em acronym, q em abbr {
/* Acronyme ou abréviation lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><q>La plupart des voyageurs se demande <em>le <abbr title="Train à Grande Vitesse">Tgv</acronym> est-il moins rapide que l'avion ?</em>.</q>, explique-t-il.</p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: italic
}


Les possibilités de varier le style sont infinies, même s’il est difficile de prévoir l’ensemble des cas lors de l’écriture de la feuille de style.

Le principe de la personnalisation des liens hypertextes est facile à transposer avec d’autres attributs.

À ce propos, et le concept n’est pas facile à comprendre pour les débutants, les feuilles de style en cascade ne constituent pas une juxtaposition de règles hétéroclites définissant chaque élement d’une page Web. Par cascade, il faut comprendre factorisation : chaque règle suit la précédente (c’est le principe de l’héritage entre parent et enfants) ou l’infirme.

Aussi faut-il ne pas oublier de refléter l’arbre logique du document dans l’écriture des styles, en respectant l’ordre d’apparition des éléments dans la page, c’est-à-dire leur héritage, de gauche à droite.

Ainsi, si nous voulons supprimer les puces devant chaque liste du document, nous écrirons…

li {
  list-style-type: none


Partant de cette règle, nous pouvons toutefois ajouter des puces devant un élément particulier, par exemple dans le conteneur post, en écrivant :

.post li {
  list-style-type: square


Ici, il faut peser avec soin l’intérêt d’une règle générale : il est contre-productif de déclarer la suppression des puces dans l’ensemble du document pour les ajouter ensuite à chaque élément ! Cependant, la redondance peut présenter l’avantage de simplifier la lecture et la maintenance du code.

Enfin, il est encore plus simple pour maintenir une feuille de style de regrouper les attributs par sélecteurs : couleurs, bordures, alignements, polices de caractères… Ainsi, si l’on souhaite changer une couleur, elle s’appliquera instantanément à tous les attributs concernés, grâce à cette explosion. La ré-écriture d’une feuille de style sous cette forme est fastidieuse, mais elle permet ensuite de gagner du temps.