Email styling with foreground and background colors

I was working on a few email designs recently when I came across an issue with the color of the text when the email was forwarded. The solution is pretty simple, it just takes a little planning.

Say you have an email with a dark body background color, say, dark gray. Then the content of your email (a table or a div) has a lighter background (white), with dark text. Then you want to add a footer or a header to the email (an unsubscribe link), outside that body, with the dark background, so you make the text color light. You end up with a style rule something like this:


body {
background-color: #666666;
color: #FFFFFF;
}

div#main {
background-color: #FFFFFF;
color: #000000;
}

Everything looks dandy, until you send that email, and someone replies or forwards the email. Many mail clients such as Outlook will mangle the original css when the message gets forwarded, and use the "body" style for the text throughout, so suddenly none of the text within your "main" div is readable, because it's white on white. Simple fix? Set the foreground color in the body style to your desired (dark) default text color, and then override it for the footer.

body {
background-color: #666666;
color: #000000;
}

div#main {
background-color: #FFFFFF;
}

div#footer {
color: #FFFFFF;
}