HTML email link color dilemma

Question

I designed an HTML email and I am having the following issues: First my entire design is based on a blue color so any blue text will not be readable by the reader/user, text

Answer 1

I saw this thread and tried the options above. The TD hack worked with changing the hex code, but I just stumbled upon a nice solution if anyone would like to try:

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

Setting the DIV to text-decoration NONE was supported by OWA. I personally was asked to remove the underline, so for my case it's perfect.

I hope people find this useful. Thanks for everyone who added their solutions as well.

Answer 2

When sending html emails the best practice is to stick to old HTML3 and HTML4. Email clients do not play well with CSS2 and up. Inline CSS work much better.

Instead of:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a> 

By the way, you have syntax errors in this line, after each css declaration you need a ;

Corrected:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a> 

Try this:

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

Do not forget to specify the HTML version on the DOCTYPE.

I've found myself working in both sides of this situation. I worked on a web based email client using PHP with IMAP, I had to strip HTML emails of a lot of things because they'd break not only the layout of the app but also the intended behavior of buttons and forms. How? you might ask. With a desktop email client this probably wouldn't be a problem but with a web based email client loading external css/js files can result into a very large array of potential pitfalls and nasty bugs.

On another occasion I was working on wedding invitations sent over HTMl emails, The amount of inline css we had to do was ridiculous. To make it work on you have to use mostly HTML3 and maybe a bit of HTML4 but not too much.

I recommend you to experiment with tables and deprecated HTML3 inline css.

---

Answer 3

**

PSEUDO CSS SUPPORTED (2007, 2010, 2016, 2017 and others)

It is like a hack because it doesn't support.

<a href="#" target="_blank" style="font-size:20px;">
   <strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>

Answer 4

You'll find success by including the <font> declaration, which is deprecated in modern HTML, though some versions of OWA still respect it:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
  <span style="color: #FFFFFF; text-decoration: none">
    <font color="#FFFFFF">1800-000-0000</font>
  </span>
</a>

Answer 5

I used the following and it worked fine in Outlook 2007, 2010, 2013, and Outlook.com. I will check with OWA soon.

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

Answer 6

Try adding a class my-link to each link in question and the following CSS in your style tag:

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

That usually covers things for me. If that fails, there is a heavier version of this code here:

.my-link a,
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

source