CODEWITHSUNDEEP
htmlcssoutlooknewsletter
Felix
Felix

Reputation: 5619

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?

Upvotes: 1

Views: 320

Answers (1)

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Related Questions