Search code examples
htmlcssemailgmail

Gmail blocking inline css properties

I am creating an email template and i am mostly using inline css but at some places even my inline css not working when i receive this email in gmail. It is working perfectly for yahoo but not for gmail.
Here is an example 

<div class="etitle" style="float:left; padding-top:5px; width:58%; margin-left:20px;">

These css properties are working in browser and also in mailchimp but when i send email then these css properties are not working in gmail. Why Gmail blocking these css properties?
I ll need little guidance about this

Solution

  • You can style email sent to Gmail using inline blocks and standard CSS. Most CSS selectors, attributes, and media-queries are supported. Unsupported CSS properties and selectors may be ignored by Gmail.

    See the reference guide for a complete list of supported CSS properties and queries.

    Example

    <html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

    See also: a complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet (from Campaign Monitor).