26

Related Topic: How to write a:hover in inline CSS?

I need to create an HTML Email News Letters. All styles should be inline. (According to – http://www.campaignmonitor.com/css/ Not all email clients recognize STYLE tag with in the HEAD tag. but they all prefer inline styles.)

My Problem: The designer wants a dark background color + white links, so I use -

<a href="http://www.mySite.com" target="_blank">
  <span style="color: #ffffff;" >ici</span>
</a>

but the default "visited color" is dark.

Is there another way to change the "visited color" ?

Thanks,

Atara.

P.S. I also tried the decrypted BODY link, vlink attributes. did not work.

Community
  • 1
  • 1
Atara
  • 3,523
  • 6
  • 37
  • 56

5 Answers5

31

First off, good luck! HTML email is stuck firmly at 1996 tech levels.

One thing to attempt if you don't actually need a separate "visited" colour is to add an !important on the span.

For example, your mail client may have something like this in their style sheet:

a:visited * { color: #000 !important; }

In which case that will override your inline style.

So, try changing your span to:

<a href="http://www.example.com" target="_blank">
    <span style="color: #ffffff !important;" >ici</span>
</a>

to override it back again.

A quick test in Chrome shows that the a:visited * { ... !important} does override the inline style, but adding the !important back to the span works fine.

2017 Update

The CampaignMonitor CSS guide now seems to recommend using a <style> element in the head, rather than inlining all styles. Based on other answers this seems to provide the best compatibility with recent version of Outlook.

kibibu
  • 6,115
  • 1
  • 35
  • 41
  • Isn't it kind of risky to apply the !important tag (cause it might change the visited attribute for all anchor tags)? If that is desired behaviour, then it is fine but should be carefult IMO. – Anshuman Kumar Jan 24 '22 at 09:59
5

I tried all that ideas described here in 2016 (with Outlook 2010 and up), none of them worked for me. But I had success using this solution: https://jamesnorthard.com/outlook-changing-visited-link-color-in-email/

He uses the strong tag inside the anchor tag (code from his blog post): <a href="#" style="color:#333399;"><strong style="font-weight:normal;">My Link</strong></a>

It even fixes the problem of a changing link color when forwarding an email with Gmail.

Hope that helps anyone else!

Chocoliver
  • 51
  • 1
  • 2
  • 1
    In outlook deskop app for windows, adding !important dint work. Adding tag fixed the issue of changing link color, when we click on it. – sapna gandhi Apr 05 '22 at 19:38
4

This is pretty old thread but thought it would be useful to somebody. Nothing else worked for me in outlook 2013 except using the plain old

<style>a:visited{color:white !important}</style>

within the body

Samuel
  • 1,949
  • 4
  • 18
  • 30
4

Why not try setting the style attribute inside the <a> tag and removing the <span> altogether?

Doing that inline should overwrite the :visited property.

Like this:

<a href="http://www.example.com" target="_blank" style="color: #ffffff !important;" >
    ici
</a>

Note: And just to be safe you can add the !important property in there to further back it up.

I think this is the best practice and the cleanest way to do this.

Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
0

a quick and dirty solution : add vlink = "yourcolor" in the body of your HTML Email News Letter (works with !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd")