Felix Felix - 7 months ago 11
HTML Question

HTML Newsletter Template

I want to create a HTML Newsletter, but in Outlook the sent mail does not fit the CSS I wrote:

The following code has no affect in Outlook

body {
font-family: verdana !important;
font-size: 12px !important;
margin: 0;
padding: 0;
}

.overheader {
height: 5px;
background-color: #e6007e;
width: 100%;
}
.ce-bodytext {
font-family: verdana !important;
font-size: 12px !important;
}


I tried using inline CSS, but to no avail:

<div class="wrapper content" style="width: 100%">
<div class="design" style="width: 70%; margin: auto;">


What is the issue & how do I change the code so that the CSS and HTML work in browser, Outlook and as well as other web mailers?

Answer

Don't use classes as more or less all email clients deletes the html head element along with all in it, such as script and style sheet links.

Here is how to achieve 100% main width with a centered 70% wide inner element, like your posted sample html, though here I used table's, since that is the best/safest way to do layout for html mails, even in 2016.

<table bgcolor="#aaa" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <table bgcolor="#eee" border="0" cellpadding="0" cellspacing="0" width="70%">
        <tr>
            <td style="font-size: 26px; font-family: arial">
               Some text...
            </td>
        </tr>
      </table>
    </td>
  </tr>
</table>