Anda dapat menata gaya email yang dikirim ke Gmail menggunakan blok <style> inline dan CSS standar. Sebagian besar pemilih, atribut, dan kueri media CSS didukung.
Properti dan pemilih CSS yang tidak didukung dapat diabaikan oleh Gmail.
Lihat panduan referensi untuk mengetahui daftar lengkap properti dan kueri CSS yang didukung.
Pemilih CSS
Anda dapat menggunakan subset pemilih CSS untuk menerapkan gaya. Gmail mendukung pemilih class, elemen, dan ID.
Contoh
<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>
Kueri Media CSS
Anda dapat menggunakan kueri media CSS standar untuk menyesuaikan gaya email agar sesuai dengan perangkat pengguna saat ini. Gmail mendukung kueri terhadap lebar layar, orientasi, dan resolusi.
Contoh
<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>
Properti & kueri CSS yang didukung
Properti CSS berikut didukung di Gmail:
- azimuth
- latar belakang
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- 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
- pembobolan
- caption-side
- clear
- warna
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- rentang kolom
- column-width
- kolom
- direction
- tampilan
- elevation
- empty-cells
- float
- font
- 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
- tinggi
- image-orientation
- image-resolution
- ime-mode
- isolasi
- 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
- opacity
- outline
- 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
- jeda
- pause-after
- pause-before
- pitch
- pitch-range
- kutipan
- richness
- berucap
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- ketegangan
- 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
Kueri media yang didukung
Jenis yang didukung
- semua
- layar
Kueri yang didukung
- min-width
- max-width
- min-device-width
- max-device-width
- orientasi
- min-resolution
- max-resolution
Kata kunci yang didukung
- dan
- hanya