CSS on Email

Question

Hi

Has anyone found a good way of embeding CSS in a programatically produced email. The best way I have found is to put the style code into a resource file and call it into the code.

An emample would be

Dim objBuilder
objBuilder = New StringBuilder

objBuilder.Append(Resources.SystemEmail.CSSStyle)
objBuilder.Append("My Styled Email")

Dim _Body As String = objBuilder.ToString()

This would build the body of the email

Is there any way to make a template file for an email or a better way to call a style sheet into one.

The code in my .resx file would be

<STYLE TYPE="text/css">
<!--
body
{

    font-family: Tahoma, Verdana, Arial;
    font-size: 10pt;
    padding: 3px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

}
-->
</STYLE>

And calling this into the string would call this inline

And with the answers below to send the message I would use this

Dim client As New SmtpClient("localhost")
Dim toAddr As New MailAddress(MailRecipients)
Dim fromAddr As New MailAddress(MailFrom)
Dim message As New MailMessage(fromAddress, toAddress)


message.Subject = "The Subject"
message.Body =  _Body 
message.IsBodyHtml = True
message.BodyEncoding = System.Text.Encoding.UTF8

client.Send(message)

Answer 1

The only way we've been successful is to include the CSS inline. Document Header style CSS inclusion isn't consistent or reliable.

Also, make sure your email headers are set to: Content-type: text/html; charset=ISO-8859-1

EDIT UTF-8 is also a good option. The KEY point of that statement is the Content-type being set to text/html

Answer 2

Inline CSS is a must to ensure maximum compatibility.

Some systems like MailChimp will take your element classes, parse your CSS, and replace the class attributes with inline styles. You could write your own code to do this.

Answer 3

You unfortunately need to include the CSS inline in the elements to have any vague compatibility across email clients. In addition you should use tables for layout (columns, etc) because CSS div layouts often fail. Attached images also fail mostly for cid: URLs. Thunderbird is about the best mail client for compatibility (obviously, as it uses the Gecko renderer). Outlook is the worst.

In addition use multipart mime with a plain text alternative. I use a database to store email templates, and there are plain text and html templates, with {{replaceable}} values.

Answer 4

In addition to the inline css that everyone is recommending, keep in mind that email is often displayed online within another web page, such as through Yahoo! Mail, Hotmail, or Gmail. You can imagine the chaos that would ensue if body style declarations or random class names were allowed. You should plan for the possibility that anything that is not defined inline will be discarded, although some systems might attempt to preserve these rules with unpredictable success.

Answer 5

Here is a comprehensive guide on which css styles are supported by each email client: http://www.campaignmonitor.com/css/

A guide on what you will need to know: http://www.campaignmonitor.com/design-guidelines/

There is also a large collection of free pre-built templates that you can use as a reference: http://www.campaignmonitor.com/templates/

Finally, the same company provides a testing tool that will show you how your message will show up in each email client for a reasonable fee: http://www.campaignmonitor.com/testing/

Answer 6

I also had the same issue before and almost got crazy over this. I did some researched too and this what I got: http://dreamluverz.com/developers-tools/css/css-and-email-how-to-do-it