Search code examples
cssnewsletter

How to write a:visited in inline CSS?


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.


Solution

  • 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.