Struggling to get [email] placeholder to respect colour change

Hey guys,

This has gotta be something obvious that I'm missing, but I'm really struggling to get the link added by the [email]placeholder to respect my CSS in outlook and gmail, which is displaying the default blue. I've got a css a deceleration in the head section that looks like this:

.footer a {color: #00AAFF !important; text-decoration: underline;}

and the actual html looks like this:

<p style="font-size: 10.5px; color:#777; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">You are receiving this email because the email address <span style="color:#00AAFF !important;">[email]</span> is subscribed to our email list. If you would no longer like to receive emails from us, you can <unsubscribe style="color: #00AAFF; text-decoration:underline;">unsubscribe from this list</unsubscribe>.</p>

What am I missing here? I added the span in an effort to colour the link, but it didn't overpower the default blue.

[edit to add] That p tag has a parent element which is a table that has a class of "footer", so it should be applying, just to be clear.

Diana Diana, 5 years ago


Gmail requires inline styles, and since they're the ones linking that email address rather than something before arriving at Gmail, they're not going to move your a tag inline for you. Your safest option there is just link the email address yourself and then you can control the link style. So <a href="mailto:[email]" style="color: #00AAFF !important; text-decoration: underline;">[email]</a> .

Hope that helps!

D. Potter
Campaign Monitor
bjbk, 5 years ago

Ah beautiful!

Thanks Diana - that's just what I was looking for!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free