CSS Email styling not working with Outlook

211 Views Asked by PlayHardGoPro At 26 July 2023 at 12:09

I have a very simple inline css style that works fine everywhere but Outlook (browser version).

I found this compatibility website and according to it, things should work fine.

Code:

<footer style="font-size: 9px;text-align: center;">
  <p>
   /.../
  </p>
</footer>

Is there a way to achieve this result also with Outlook?
I Couldn't find, but anyone know if there is a preview for email styling?

Original Q&A

There are 1 best solutions below

Md. Rakibul Islam On 26 July 2023 at 15:41

Use table and write the styles inline in the table cell(td) like below and it will work in Outlook.

Many tags and CSS rules don't work for emails but work fine for webpages and emails when checked in browser.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Email</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="margin: 0; padding: 0;">

  <!-- using footer -->
  <footer style="font-size: 9px;text-align: center;">
    <p>
     This is inside the footer
    </p>
  </footer>
  
  <!-- using table -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
          <tr>
            <td style="font-size: 9px;text-align: center;">
              This is inside the table
            </td>
          </tr>          
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

CSS Email styling not working with Outlook

There are 1 best solutions below

Related Questions in CSS

Related Questions in OFFICE365

Related Questions in HTML-EMAIL

Related Questions in OUTLOOK-WEB-APP

Trending Questions

Popular # Hahtags

Popular Questions