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.
Pemilih dan properti 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 sebagian selektor 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, orientasi, dan resolusi layar.
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
- break-inside
- caption-side
- clear
- warna
- jumlah-kolom
- isi-kolom
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- 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