Implement css in html to send an email to Outlook

Question

Implement css in html to send an email to Outlook

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I'm creating an HTML with CSS styles to send an email from asp.net, the problem is that when the email arrives in Outlook it does not respect the styles, I have already tried to put them embedded in the html, in line with the tags and with an external css file but it does not. Does anyone have any idea why this is happening and what can I do to solve it?

For example: I have this code in the html with online css styles:

 <p margin="0px" padding="0px" font-size="12px" font-family="Arial">
     <a href="mailto:[email protected]" text-decoration="none !important" color="#02a1d3 !important">[email protected]</a>
  </p>

and in the outlook when I receive the mail I do not respect the styles and I put this:

html css asp.net outlook

asked by Anahi Duarte 08.12.2017 в 00:21

source

4 answers

modify table in mysql from a php form bringing the data from another file Why when I try my game on android does not send me to the scenes I want?

score 1 · Answer 1

To solve or detect these problems well you should check the following things in your HTML email template:

1 .- Never use the css from an external file, for example from the head of your template you should not call a <link rel="stylesheet" href="" /> .

2 .- Your document HTML NO must be of type html 5 you must occupy the header of html 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3 .- In your html tag you should add the following <html xmlns="http://www.w3.org/1999/xhtml">

4 .- Just limit yourself to% old% of CSS3

5 .- Your css must be within the css tags in the same document.

6 .- To design just use a div tables you can use it from time to time, but it is advisable to use tables.

Instead of reinventing the wheel, I recommend that you read about this topic, since there are currently frameworks that have email designs included, such as foundations for emails , which will make your life much easier.

If after all this you still have problems, you should check your email service logic to see if you have activated the html option.

If you continue with the problem do not hesitate to ask, since I had the same problems.

score 0 · Answer 2

The proper way to build an html that works in an email is using tables, not divs or any other tag.

I always remember the TA-TR-TD as a cycle. First a TAbla, then a TR row and then a TD column. And start again.

In the example that you pose, it could be something like that

<!-- CENTER THE EMAIL // -->
<center style="background-color:#E1E1E1;">
  <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
    <tr>
      <td align="center" valign="top" id="bodyCell">
        <a style="color:#FFFFFF;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:135%;" href="mailto:[email protected]" target="_blank">[email protected]</a>
      </td>
    </tr>
  </table>
  <!-- // CONTENT TABLE -->

You can vary colors of fonts and margins directly in the table, or use style as suggested by amenadiel.

It is important to understand that outlook and mail clients in general do not see the same thing as a browser when defining the format of the content. They are optimized or (according to my opinion) they stayed in time and did not evolve at the speed that the html5 did.

I hope this information is of your use.

score 0 · Answer 3

Style attributes are given within the style attribute

    <p style="margin:0px;padding:0px;font-size:12px;font-family:Arial">
       <a href="mailto:[email protected]" style="text-decoration:none !important; color:#02a1d3 !important">[email protected]</a>
    </p>

According to what they say in outlook-software-strips-out-the-inline-css- in-emails is a frequent problem that outlook does not treat CSS Inline in a standard way. In that same link some mitigations appear. But it will never look exactly the same as in gmail.

score 0 · Answer 4

for example the text decoration should go in the style

 style='color:#838383; text-decoration:none;'

but that's not enough, you should document about the styles that Outlook accepts, I recommend link you can test your emails before sending it, outlook , gmail, hotmail 2003, 2009 etc, it's great