आप इनलाइन <style>
ब्लॉक और स्टैंडर्ड सीएसएस का इस्तेमाल करके, Gmail को भेजे गए ईमेल को स्टाइल कर सकते हैं. ज़्यादातर सीएसएस सिलेक्टर, एट्रिब्यूट, और मीडिया क्वेरी का इस्तेमाल किया जा सकता है.
Gmail, इस्तेमाल न की जा सकने वाली सीएसएस प्रॉपर्टी और सिलेक्टर को अनदेखा कर सकता है.
इस्तेमाल की जा सकने वाली सीएसएस प्रॉपर्टी और क्वेरी की पूरी सूची देखने के लिए, रेफ़रंस गाइड देखें.
सीएसएस सिलेक्टर
स्टाइल लागू करने के लिए, सीएसएस सिलेक्टर के किसी सबसेट का इस्तेमाल किया जा सकता है. Gmail में क्लास, एलिमेंट, और आईडी सिलेक्टर इस्तेमाल किए जा सकते हैं.
उदाहरण
<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>
सीएसएस मीडिया क्वेरी
उपयोगकर्ता के मौजूदा डिवाइस के हिसाब से ईमेल की स्टाइल बदलने के लिए, स्टैंडर्ड सीएसएस मीडिया क्वेरी का इस्तेमाल किया जा सकता है. Gmail, स्क्रीन की चौड़ाई, स्क्रीन की दिशा, और रिज़ॉल्यूशन के हिसाब से क्वेरी करता है.
उदाहरण
<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>
इस्तेमाल की जा सकने वाली सीएसएस प्रॉपर्टी और क्वेरी
Gmail में ये सीएसएस प्रॉपर्टी काम करती हैं:
- azimuth
- बैकग्राउंड
- background-blend-mode
- background-clip
- background-color
- पृष्ठभूमि-छवि
- पृष्ठभूमि-मूल
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- बॉर्डर-निचला-शैली
- 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
- ब्रेक के बाद
- ब्रेक से पहले
- ब्रेक-इनसाइड
- caption-side
- मिटाएं
- रंग
- कॉलम की संख्या
- कॉलम-फ़िल
- कॉलम-गैप
- कॉलम-नियम
- कॉलम-नियम-रंग
- कॉलम-नियम की शैली
- कॉलम-नियम की चौड़ाई
- कॉलम-स्पैन
- कॉलम की चौड़ाई
- कॉलम
- direction
- display
- elevation
- empty-cells
- float
- फ़ॉन्ट
- 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
- ऊंचाई
- image-orientation
- image-resolution
- ime-mode
- बीमार लोगों को स्वस्थ लोगों से अलग रखना
- 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-top
- marker-offset
- max-height
- max-width
- न्यूनतम-ऊंचाई
- 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
- पेज-ब्रेक-बाद
- पेज-ब्रेक-पहले
- पेज-ब्रेक-इन-साइड
- रोकें
- pause-after
- pause-before
- पिच
- pitch-range
- quotes
- richness
- बोलना
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- तनाव
- 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-spacing
- word-wrap
- writing-mode
- ज़ूम
इस्तेमाल की जा सकने वाली मीडिया क्वेरी
इस तरह के कोड काम करते हैं
- सभी
- स्क्रीन
इस्तेमाल की जा सकने वाली क्वेरी
- min-width
- max-width
- डिवाइस की कम से कम चौड़ाई
- max-device-width
- स्क्रीन की दिशा
- कम से कम रिज़ॉल्यूशन
- max-resolution
इस्तेमाल किए जा सकने वाले कीवर्ड
- और
- सिर्फ़ एक आइटम चुनें