CSS question: how do I do link pseudo classes as inline styles? WordPress
- SOLVED
Idiot question, I know. I don't have time to look this up. I'm working on an HTML newsletter for a client, and all the CSS must go inline. I have something like:
<a style="color:#993;" href="http://codewi.se">Amazing website!</a>
How do I change the visited color? If this was a style sheet I would use:
a:visited { color:#993; }
but inline?
Answers (3)
Utkarsh Kukreti answers:
I think you can embed <style> tags in emails.
<style>
a:visited { color:#993; }
</style>
Lawrence Krubner comments:
I am sorry, I think I mis-phrased the question. Style tags, like what you are showing, get stripped out by some email readers. So I need something that can go in the tag, like:
<a style="color:#993; visited-color:#993;" href="http://codewi.se">Amazing website!</a>
Luke America answers:
Utkarsh is correct. However, to ensure compliance with more email clients, it should be:
<style type="text/css">
a:visited {color:#993;}
</style>
Even though you would normally implement code like this in the HEAD section of an HTML file, it will work if placed at the very top of your email's HTML source code.
Lawrence Krubner comments:
I am sorry, I think I mis-phrased the question. Style tags, like what you are showing, get stripped out by some email readers. So I need something that can go in the tag, like:
<a style="color:#993; visited-color:#993;" href="http://codewi.se">Amazing website!</a>
But I don't think "visited-color " exists
Luke America comments:
According to this style guide for emails, it should work in most major email clients, except gMail. But, I have used that exact snippet (different color) with success in gMail as well. I believe the best accepted practice is to put the code at the very top of your HTML source and NOT use HEAD or BODY tags.
[[LINK href="http://www.campaignmonitor.com/css/"]]Guide to CSS Support in Email[[/LINK]]
This doesn't address the point you raised, but you may have more universal success with:
<style type="text/css">
a:visited {color:#993 !important;}
</style>
Dylan Kuhn answers:
Looks like the answer is no, you can't: [[LINK href="http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles"]]http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles[[/LINK]]