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);

What is your question / what are you trying to do and what is the problem exactly? — Sébastien
– Sébastien, Commented Oct 22, 2013 at 12:01
You already use inline css, that should work fine, just make sure that you send the email supporting HTML. — Andre Lombaard
– Andre Lombaard, Commented Oct 22, 2013 at 12:03
What email client does the customer use? There is much difference between email clients in how much CSS they support. Is the HTML shown normally otherwise (bold and large for the h3, etc)? — Mr Lister
– Mr Lister, Commented Oct 22, 2013 at 12:04
Inline style should definitely work for most basic styles. Are you specifying IsBodyHtml as true for your System.Net.Mail.MailMessage object? — Abhitalks
– Abhitalks, Commented Oct 22, 2013 at 12:04
I recommend to use this post: stackoverflow.com/questions/9584170/… Best Regards, Dii~ — Diego Murakami
– Diego Murakami, Commented Oct 24, 2013 at 12:56

Monika · Accepted Answer · 2013-10-30 07:36:15Z

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.

user1098580 · Accepted Answer · 2013-10-22 13:47:14Z

1

I think that you're missing a header in your html. I format my mail like this:

<html>
  <head>
    <style>
      All your css here
    </style>
  </head>
  <body>
    your html here
  </body>
</html>

And it work fine.

answered Oct 22, 2013 at 13:47

user1098580

4094 silver badges9 bronze badges

1 Comment

Mr Lister Over a year ago

Actually, the content of the email is supposed to be just content. No <head> or <html> are needed, or wanted.

Collectives™ on Stack Overflow

Adding css in html that will be sent to an email

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related