Puedes aplicar diseño a los correos electrónicos que se envían a Gmail con bloques <style> intercalados y CSS estándar. Se admiten la mayoría de los selectores, atributos y consultas de medios de CSS.
Es posible que Gmail omita las propiedades y los selectores de CSS no compatibles.
Consulta la guía de referencia para obtener una lista completa de las propiedades y consultas de CSS compatibles.
Selectores CSS
Puedes usar un subconjunto de selectores CSS para aplicar estilos. Gmail admite selectores de clase, elemento y 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>
Búsquedas de medios de CSS
Puedes usar consultas de medios CSS estándar para ajustar el diseño de un correo electrónico según el 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
Las siguientes propiedades CSS son compatibles con Gmail:
- 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
- break-after
- break-before
- break-inside
- caption-side
- clear
- color
- column-count
- column-fill
- column-gap
- ruleta de columna
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columnas
- dirección
- 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
- page-break-after
- page-break-before
- page-break-inside
- pausa
- pause-after
- pause-before
- pitch
- 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
- min-device-width
- max-device-width
- orientación
- min-resolution
- max-resolution
Palabras clave compatibles
- y
- solo