Nous savions déjà que pour utiliser des styles CSS dans un emailing, il fallait placer les définitions CSS dans l'entête du document HTML et non dans un fichier externe, sous peine de voir toute la mise en page prévue (polices, taille du texte, couleurs de fond, etc...) s'effondrer chez le destinataire.

Avec l'utilisation de plus en plus répandue des webmails (Gmail, Yahoo, Hotmail, etc...), ça se complique un peu. En effet les Webmails affichent vos emailing au format HTML dans des pages qui sont elles aussi HTML, et pour éviter tout conflit au niveau du code source, ils suppriment purement et simplement l'entête de votre document HTML (<head>...</head>) ainsi que la balise <BODY>. De ce fait, toutes les définitions de styles CSS sont perdues... et la mise en page également.

Pour y remédier, il faut intégrer tous les styles CSS au coeur du document sur chaque balise HTML à l'aide de l'attribut style="..." (on appelle cela les styles CSS en ligne) comme on peut le voir dans l'exemple ci-dessous :



Il ne faut pas pour autant supprimer les styles CSS définis dans l'entête de votre message et sur la balise <BODY>, car si les webmails les suppriment, les logiciels comme Outlook, Thunderbird, etc... les utiliseront normalement.

Cette technique permet d'améliorer grandement l'affichage dans les webmails, cependant le résultat ne sera presque jamais identique à l'affichage produit par les logiciels emails. A l'heure actuelle, le webmail faisant le plus d'effort pour afficher au mieux les emailings HTML est Yahoo.