title: Why is gmail client (via Chrome and Android app) still strip <style> tag from HTML email?
body: <p>I recently reviewed the <a href="https://app.pluralsight.com/library/courses/responsive-html-email-design/table-of-contents" rel="nofollow noreferrer">Pluralsight course on HTML email</a> and then made a sample for myself. I tested it through Mailchimp and the Mailchimp test environment renders it as expected for both mobile and desktop, but when I sent a test email to myself, both gmail clients that I use (Gmail app through Chrome on desktop and Android app on mobile) appeared to strip the style and link tags, in particular stripping the media screen size queries and associated classes, as well as font imports.</p>
  
  <p><a href="https://litmus.com/blog/gmail-to-support-responsive-email-design" rel="nofollow noreferrer">This article</a> claims that gmail clients are now accepting  tags, at least on most platforms, including the two I am testing. However, as noted the @media and @import queries are not working. (1) Is there something obviously wrong with my code?, or (2) is this an issue with Mailchimp?</p>
  
  <p>HTML email code,  and part of  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Happy Holidays!&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico" rel="stylesheet"&gt;
    &lt;style type="text/css"&gt;
  
      /* CLIENT-SPECIFIC STYLES ------------------- */
  
    #outlook a {
      padding: 0; /* Force Outlook to provide a "view in browser" message */
    } 
  
    .ReadMsgBody {
      width: 100%; /* Force Hotmail to display emails at full width */
    } 
  
    .ExternalClass {
      width:100%; /* Force Hotmail to display emails at full width */
    }
  
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
      line-height: 100%; /* Force Hotmail to display normal line spacing */
    }
  
    body, table, td, a { /* Prevent WebKit and Windows mobile changing default text sizes */
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
  
    table, td { /* Remove spacing between tables in Outlook 2007 and up */
      mso-table-lspace: 0pt;
      mso-table-rspace:0pt;
    }
  
    img { /* Allow smoother rendering of resized image in Internet Explorer */
      -ms-interpolation-mode: bicubic;
    }
  
    /* RESET STYLES --------------------------- */
  
    body { 
      height: 100% !important;
      margin: 0;
      padding: 0;
      width: 100% !important;
    }
  
    img { 
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }
  
    table {
      border-collapse: collapse !important;
    }
  
    a {
      text-decoration: none;
    }
  
    /* iOS BLUE LINKS */
  
    .apple-links a { 
      color: #A50001;
      text-decoration: none;
    }
  
    /* FONTS */
    @import url('https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico');
  
    /* MOBILE STYLES ------------------------ */
    @media only screen and (max-width: 600px) {
  
      td[class="logo"] img {
        margin: 0 auto !important;
      }
  
      table[class="wrapper"] {
        width: 100% !important;
      } 
  
      td[class="mobile-image-pad"] {
        padding: 0 10px 0 10px !important;
      }
  
      td[class="mobile-title-pad"] {
        padding: 10px 0px 0px 10px !important;
      }
  
      td[class="mobile-text-pad"] {
        padding: 10px 10px 10px 10px !important;
      }
  
      td[class="mobile-column-right"] {
        padding-top: 20px !important;
      }
  
      img[class="fluid-image"] {
        width: 100% !important;
        height: auto !important;
      }
  
      td[class="hide"] {
        display: none !important;
      } 
  
      td[class="mobile-button"] {
        padding: 12px 60px 12px 60px !important;
      }
  
      td[class="mobile-button"] a {
        font-size: 24px !important;
      }
    }
  
  
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="margin: 0; padding: 0;" &gt;
  
    &lt;!-- CONTAINER TABLE (HEADER) --&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;"&gt;
      &lt;tr&gt;
        &lt;td align="center" bgcolor="#339969" style="padding: 0 0 0 0;"&gt;
  
          &lt;!-- HIDDEN PREHEADER --&gt;
          &lt;div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;"&gt;
            Preheader inbox text
          &lt;/div&gt;
          &lt;!-- WRAPPER TABLE --&gt;
          &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper"&gt;
            &lt;!-- HEADER --&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                  &lt;tr&gt;
                    &lt;td align="left" background="img/url" alt="Bappy Bolidays!" width="100%" height="100" style="background-size:contain;"&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;!-- CONTAINER TABLE (HERO) --&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"&gt;
      &lt;tr&gt;
        &lt;td align="center" bgcolor="#C3D79C" style="padding: 20px 0 20px 0;"&gt;
          &lt;!-- WRAPPER TABLE --&gt;
          &lt;table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper"&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;!-- TWO COLUMNS --&gt;
                &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;
                      &lt;!-- LEFT COLUMN --&gt;
                      &lt;table border="0" cellpadding="0" cellspacing="0" width="64%" align="left" class="wrapper"&gt;
                        &lt;tr&gt;
                          &lt;td&gt;
                            &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                              &lt;tr&gt;
                                &lt;td class="mobile-image-pad"&gt;
                                  &lt;img src="img/url" alt="Two Beautiful Peeps" width="384" height="288" border="0" style="display: block; image-orientation: from-image; color: #A50001; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #339969; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" /&gt;
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/table&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!-- RIGHT COLUMN --&gt;
                      &lt;table border="0" cellpadding="0" cellspacing="0" width="30%" align="right" class="wrapper"&gt;
                        &lt;tr&gt;
                          &lt;td valign="middle" height="100%"&gt;
                            &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                              &lt;tr&gt;
                                &lt;td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad"&gt;
                                  Title
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="center" style="color: #339969; font-family: 'Cabin', sans-serif; font-weight: bold; font-size: 20px; line-height: 24px;" class="mobile-title-pad"&gt;
                                  from
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad"&gt;
                                  Title
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="center" style="padding: 20px 0 0 0;"&gt;
                                  &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
                                    &lt;tr&gt;
                                      &lt;td align="center" bgcolor="#339969" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-button"&gt;
                                        &lt;a href="https://www.youtube.com/watch?v=08bLSIWGoSg#t=00m06s" target="_blank" style="font-size: 16px; font-family: 'Cabin', sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;"&gt;let's go champ &amp;rarr;&lt;/a&gt;
                                      &lt;/td&gt;
                                    &lt;/tr&gt;
                                  &lt;/table&gt;  
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/table&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/table&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;!-- CONTAINER TABLE (VIGNETTES) --&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"&gt;
      &lt;tr&gt;
        &lt;td align="center" bgcolor="#fff2f9" style="padding: 40px 0 40px 0;"&gt;
          &lt;!-- WRAPPER TABLE --&gt;
          &lt;table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper"&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;!-- TWO COLUMNS (ROW 1) --&gt;
                &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;
                      &lt;!-- LEFT COLUMN --&gt;
                      &lt;table border="0" cellpadding="0" cellspacing="0" width="47%" align="left" class="wrapper"&gt;
                        &lt;tr&gt;
                          &lt;td&gt;
                            &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                              &lt;tr&gt;
                                &lt;td class="mobile-image-pad"&gt;
                                  &lt;a href="album/location" target="_blank"&gt;
                                    &lt;img src="img/url" alt="Kapanda" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" /&gt;
                                  &lt;/a&gt;
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="left" style="padding: 20px 0 0 0; color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad"&gt;
                                  Title
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad"&gt;
                                  &lt;a href="album/location" target="_blank" style="color: #589263; text-decoration: none;"&gt;description&lt;/a&gt; more description! 
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/table&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!-- RIGHT COLUMN --&gt;
                      &lt;table border="0" cellpadding="0" cellspacing="0" width="47%" align="right" class="wrapper"&gt;
                        &lt;tr&gt;
                          &lt;td class="mobile-column-right"&gt;
                            &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                              &lt;tr&gt;
                                &lt;td class="mobile-image-pad"&gt;
                                  &lt;a href="album/location" target="_blank"&gt;
                                    &lt;img src="url/img" alt="Hawaii Sunset" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" /&gt;
                                  &lt;/a&gt;
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="left" style="padding: 20px 0 0 0; color: #339969; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad"&gt;
                                Title
                                &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad"&gt;
                                  &lt;a href="album/lcoation" target="_blank" style="color: #A50001; text-decoration: none;"&gt;Description&lt;/a&gt; More description.
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/table&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/table&gt;
  
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
  </code></pre>