How to Properly Add CSS in a MailMessage

Question

I'm writing some HTML to a MailMessage.Body and would like to include some CSS to format fonts, tables, etc. I'm having trouble getting the final HTML to be formed properly.

For example:

public static void CreateMessageWithMultipleViews(string server, string recipients)
{
    // Create a message and set up the recipients.
    MailMessage message = new MailMessage("jane@contoso.com","joe@contoso.com");

    // Construct body as HTML. 
    message.Body = @"<html>
        <head>
            <style>
                p{
                    font-family:""Trebuchet MS"", Arial, Helvetica, sans-serif;
                    font-size:0.9em;
                    text-align:left;
                }
            </style>
        </head>
            <body>
                Some body text
            </body>
        </html>");

    // Set this property so that HTML renders
    message.IsBodyHtml = true;

    // Send the message.
    SmtpClient client = new SmtpClient(server);
    client.Credentials = CredentialCache.DefaultNetworkCredentials;
try 
{
    client.Send(message);
}
catch (Exception ex) 
{
    Console.WriteLine("Exception caught: {0}", 
    ex.ToString() );
}

My email recipients all use Outlook 2010 and this renders exactly as expected. But I have a hard time liking it -- there are repeated <html> and <header> tags in the final email source:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
    </head>
<html>
    <head>
        <style>
            [..truncated..]

So my question is, how do I properly set the HTML source of an email using MailMessage so that it is well formed? I see a 'Header's property in the MailMessage class, but that is for the message headers, not HTML headers. Do I need to put the CSS code somewhere else possibly?

score 4 · Accepted Answer · answered Nov 19 '13 at 18:10

Keeping in mind that I only need to render properly in Outlook 2010, I'm dropping the explicit <html> and <header> tags and allowing the MailMessage to handle those:

message.Body = @"
        <style>
            <!--
            p{
                [truncating the rest...]
            }
            --->
        </style>";

When I receive the email in Outlook, this is the format of the source, which works for rendering and it's quite as illogical as before (I corrected the indention for readability):

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></head>
<style>
    [css...]
</style>
<body>
    [content...]
</body>
</html>

The CSS still isn't contained within the tag, but at this point I feel lucky that the HTML renders properly in the Outlook client.

How to Properly Add CSS in a MailMessage

1 Answers1