Anda dapat mengatur gaya email yang dikirim ke Gmail menggunakan pemblokiran <style> sebaris dan
di CSS standar. Sebagian besar pemilih CSS, atribut, dan kueri media didukung.
Pemilih dan properti CSS yang tidak didukung dapat diabaikan oleh Gmail.
Baca 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 kelas, , dan pemilih 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 ke sesuai dengan perangkat pengguna saat ini. Gmail mendukung kueri pada 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 CSS yang didukung & kueri
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 melanggar
- break-before
- membobol
- caption-side
- clear
- warna
- jumlah kolom
- isian kolom
- kolom-gap
- aturan-kolom
- warna-kolom-aturan
- 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-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
- jeda-halaman setelah
- jeda-halaman sebelum
- penerobosan halaman
- 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
- resolusi min
- resolusi maksimum
Kata kunci yang didukung
- dan
- hanya