Compatibilidad con CSS

Puedes definir el estilo de los correos electrónicos enviados a Gmail con bloques <style> intercalados y CSS estándar. Se admiten la mayoría de los selectores CSS, los atributos y las consultas de medios. Es posible que Gmail ignore las propiedades y los selectores de CSS no compatibles.

Consulta la guía de referencia para obtener una lista completa de las propiedades y las consultas de CSS compatibles.

Selectores CSS

Puedes usar un subconjunto de selectores CSS para aplicar estilos. Gmail admite selectores de clase, de elemento y de ID.

Ejemplo

<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>

Consultas de medios de CSS

Puedes usar consultas de medios CSS estándar para ajustar el estilo de un correo electrónico, de modo que se adapte al dispositivo actual del usuario. Gmail admite consultas sobre el ancho, la orientación y la resolución de la pantalla.

Ejemplo

<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>

Propiedades y consultas de CSS compatibles

Gmail admite las siguientes propiedades de CSS:

  • azimuth
  • background
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • borde
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-sizing
  • descanso después
  • descanso antes
  • irrumpir en el interior
  • caption-side
  • clear
  • color [color]
  • recuento de columnas
  • relleno de columnas
  • espacio-columna
  • regla de columnas
  • color de la regla de columnas
  • estilo de regla de columnas
  • ancho de la regla de columnas
  • intervalo de columnas
  • ancho de columna
  • columnas
  • direction
  • display
  • Elevación
  • empty-cells
  • float
  • fuente
  • font-family
  • font-feature-settings
  • font-kerning
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • alto
  • image-orientation
  • image-resolution
  • ime-mode
  • aislamiento
  • layout-flow
  • layout-grid
  • layout-grid-char
  • layout-grid-char-spacing
  • layout-grid-line
  • layout-grid-mode
  • layout-grid-type
  • letter-spacing
  • line-break
  • line-height
  • list-style
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marker-offset
  • max-height
  • max-width
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • object-position
  • opacidad
  • descripción
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • salto de página después
  • salto de página anterior
  • salto de página interno
  • pausa
  • pause-after
  • pause-before
  • lanzamiento
  • pitch-range
  • citas
  • más funciones
  • hablar
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • table-layout
  • text-align
  • text-align-last
  • text-autospace
  • text-combine-upright
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-style
  • text-indent
  • text-justify
  • text-kashida-space
  • text-orientation
  • text-overflow
  • text-transform
  • text-underline-position
  • unicode-bidi
  • vertical-align
  • voice-family
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • zoom

Consultas de medios compatibles

Tipos admitidos

  • todos
  • pantalla

Consultas admitidas

  • min-width
  • max-width
  • ancho mínimo del dispositivo
  • max-device-width
  • orientación
  • resolución mínima
  • max-resolution

Palabras clave admitidas

  • y
  • solo