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