All geek questions in one place

Adding css to html to be emailed

I created a method that will send an email with information to customers. However, the letter looks awful because there is no style for it. For some reason, I can't apply the style to email. I tried to do this, and there are many ways to solve this problem in the code, but this is not my problem. I have to put the css code in the body of the Html, as it should be displayed to the client when it opens the email.

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

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

and it does not work.

Any help on how to solve it is appreciated. Below is my code. I 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 postal information.

 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);
+6
source share
2 answers

Here are some suggestions:

Do not put CSS inside HEAD tags in the HTML email address.

When encoding a web page, you traditionally place CSS code between the HEAD tags above the content. But when HTML emails are viewed in browser-based email applications (e.g. YahooMail !, Gmail, Hotmail, etc.), these applications by default highlight the HEAD and BODY tags.

We recommend that you put your CSS code in your content (Note: Browser-based email applications also cross out your BODY tag, so any background colors or BODY settings should be processed using the TABLE wrapper "100" your email address. Or we suggest you take a look at our automatic CSS-inliner function.).

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.

The link to the 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 above). Add space in front of the CSS lines.

We noticed that some mail servers (not MailChimp, but your recipients) like to highlight any lines starting with periods (.)

This can ruin your CSS. So, a workaround is to add space before any CSS starting with a dot, for example:

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

This, of course, is only necessary if you cannot place CSS code in your text.

+10
source

I think you are missing the header in your html. I will format my mail as follows:

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

And it works great.

+2
source

Source: https://habr.com/ru/post/956477/

More articles: