Adding css in html that will be sent to an email

Question

I have created a method that will send an email with information to customers. However, the email looks awful cus there is no style to it. I can't apply the style to the email for some reason. I have tried to google it, and there is a lot on how to solve this in code behind, but that's not my issue. I must place the css code in the Html body, since it must be displayed for the client when he opens the email.

So my question is, how do I add css to the html code above? I have tried doing:

<div style='...'></div>

and this does not work

Any help on how to solve this is appreciated. Below some of my code. I have shortened it, for readability.

string HtmlBody = @"<div style='float: right'>
    <h3>Faktura</h3> <br />
    Navn:<asp:Label ID='navn' runat='server' Text='%Navn%'/> <br />
    Adresse:<asp:Label ID='adresse' runat='server' Text='%Adresse%'/> <br />
    Postnr:<asp:Label ID='postnummer' runat='server' Text='%Postnr%'/> <br />
    Land:<asp:Label ID='land' runat='server' Text='Danmark' /> <br />
    Tlf: &nbsp;<asp:Label ID='tlfnummer' runat='server' Text='%Tlf%' /> <br />
    Mail: &nbsp;<asp:Label ID='email' runat='server' Text='%Email%' /> <br />

    <div style='float: right'>
        <p>Dato</p>                                 
    </div> 
    <hr /> <br />
    <table style='background-color: #c00764'>
        <tr>
            <td><b>Fakturanr:</b></td>
            <td>%fakturanr%</td>
        </tr>
        <tr>
            <td><b>Ordrenr:</b></td>
            <td>%Ordrenr%</td>
        </tr>
    </table>
</div>";

Here are some of my info on the mail part

MailMessage mailMsg = new MailMessage();
mailMsg.IsBodyHtml = true;
mailMsg.Priority = MailPriority.Normal;

var smtpValues = GetSmtpValues();
var smtpCredentials = GetNetworkCredentials();

SmtpClient smptClient = new SmtpClient(smtpValues.Key, smtpValues.Value);
smptClient.EnableSsl = true;
smptClient.Credentials = new NetworkCredential(smtpCredentials.Key, smtpCredentials.Value);

//Send mail
smptClient.Send(mailMsg);

Answer 1

Here are some tips:

Don't place CSS inside the HEAD tags in HTML Email.

When you code a web page, you traditionally place the CSS code in between the HEAD tags, above your content. But when HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default.

We recommend that you place your CSS code inline to your content (Note: browser-based email apps also strip out your BODY tag, so any background colors or BODY settings should be handled with a 100% wide TABLE "wrapper" around your email. Or we suggest that you take a look at our Automatic CSS-inliner feature.).

It should look something like this:

<span style=" font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">Your content here....</span>

Use inline CSS.

Referencing CSS files on your server like this is not very reliable:

<link href="http://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">

You should use inline CSS (as specified above). Add a space in front of CSS lines.

We've noticed that some email servers (not MailChimp's, but your recipients') like to strip out any lines that begin with periods (.)

This can ruin your CSS. So, the workaround is to add a space in front of any CSS that begins with a dot, such as:

.title {font-size:22px;}
.subTitle {font-size:15px;}

This is, of course, only needed if you're not able to place CSS code inline to your content.