CSS Support

You can style email sent to Gmail using inline <style> 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.

CSS Selectors

You can use a subset of CSS selectors to apply styles. Gmail supports class, element, and id selectors.

Example

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>This text is blue.</p=>
      <p>Jerry</p>
    </div>
  </body>
</html>

CSS Media Queries

You can use standard CSS media queries to adjust the styling of an email to suit the user's current device. Gmail supports queries against the screen width, orientation, and resolution.

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>

Enviar comentarios sobre…

Gmail & Inbox Sender Resources
Gmail & Inbox Sender Resources