Anda dapat menyesuaikan gaya email yang dikirim ke Gmail menggunakan blok <style> inline dan
CSS standar. Sebagian besar pemilih CSS, atribut, dan kueri media didukung.
Properti dan pemilih CSS yang tidak didukung mungkin 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, 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
- setelah jeda
- jeda sebelum
- jeda
- caption-side
- clear
- warna
- jumlah-kolom
- kolom-pengisian
- kesenjangan kolom
- aturan-kolom
- warna-aturan kolom
- gaya aturan-kolom
- lebar-aturan-kolom
- rentang kolom
- lebar kolom
- 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-alternatif
- 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
- batas halaman
- batas halaman sebelum
- batas halaman
- jeda
- pause-after
- pause-before
- pitch
- pitch-range
- kutipan
- richness
- ucapkan
- 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
- all
- layar
Kueri yang didukung
- min-width
- max-width
- lebar-perangkat-minimum
- lebar-perangkat-maksimum
- orientasi
- resolusi min
- resolusi maks
Kata kunci yang didukung
- dan
- hanya