सीएसएस को देखने और उसमें बदलाव करने से जुड़ी Chrome DevTools की सुविधाओं के बारे में इस रेफ़रंस में जानें. साथ ही, नए वर्कफ़्लो के बारे में जानें.
बुनियादी जानकारी के लिए, सीएसएस देखना और बदलना लेख पढ़ें.
कोई एलिमेंट चुनें
DevTools के एलिमेंट पैनल की मदद से, एक बार में किसी एक एलिमेंट की सीएसएस देखी जा सकती है या उसमें बदलाव किया जा सकता है.
स्क्रीनशॉट में, डीओएम ट्री में नीले रंग से हाइलाइट किया गया h1 एलिमेंट, चुना गया एलिमेंट है.
दाईं ओर, एलिमेंट की स्टाइल स्टाइल टैब में दिखती हैं. बाईं ओर, एलिमेंट को व्यूपोर्ट में हाइलाइट किया गया है. हालांकि, ऐसा सिर्फ़ इसलिए है, क्योंकि माउस को डीओएम ट्री में उस पर कर्सर घुमाया जा रहा है.
ट्यूटोरियल के लिए, किसी एलिमेंट की सीएसएस देखना लेख पढ़ें.
किसी एलिमेंट को चुनने के कई तरीके हैं:
- अपने व्यूपोर्ट में, एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें.
- DevTools में, किसी एलिमेंट को चुनें
पर क्लिक करें या Command+Shift+C (Mac) या Control+Shift+C (Windows, Linux) दबाएं. इसके बाद, व्यूपोर्ट में मौजूद एलिमेंट पर क्लिक करें. - DevTools में, डीओएम ट्री में मौजूद एलिमेंट पर क्लिक करें.
- DevTools में, Console में
document.querySelector('p')जैसी क्वेरी चलाएं. इसके बाद, नतीजे पर राइट क्लिक करें और Elements पैनल में दिखाएं को चुनें.
सीएसएस देखें
सीएसएस के नियमों को देखने के लिए, Elements > Styles और Computed टैब का इस्तेमाल करें. साथ ही, सीएसएस से जुड़ी समस्याओं का पता लगाएं.
लिंक की मदद से नेविगेट करना
स्टाइल टैब में, अलग-अलग जगहों पर मौजूद लिंक दिखाए जाते हैं. इनमें ये शामिल हैं, लेकिन इनके अलावा और भी लिंक हो सकते हैं:
- सीएसएस नियमों के बगल में, स्टाइल शीट और सीएसएस सोर्स के लिए. ऐसे लिंक, Sources पैनल खोलते हैं. अगर स्टाइल शीट को छोटा किया गया है, तो छोटी की गई फ़ाइल को पढ़ने लायक बनाएं लेख पढ़ें.
- ...से इनहेरिट किया गया सेक्शन में, पैरंट एलिमेंट पर.
var()कॉल में, कस्टम प्रॉपर्टी के एलान के लिए.animationशॉर्टहैंड प्रॉपर्टी में,@keyframesके लिए.- दस्तावेज़ के टूलटिप में ज़्यादा जानें लिंक.
- और ज़्यादा.
यहां कुछ हाइलाइट दी गई हैं:
लिंक को अलग-अलग स्टाइल में दिखाया जा सकता है. अगर आपको पक्के तौर पर नहीं पता है कि कोई टेक्स्ट लिंक है या नहीं, तो उस पर क्लिक करके देखें.
सीएसएस दस्तावेज़, खास जानकारी, और कस्टम प्रॉपर्टी वैल्यू के साथ टूलटिप देखना
स्टाइल > स्टाइल में, टूलटिप दिखती हैं. इनमें कुछ खास एलिमेंट पर कर्सर घुमाने पर काम की जानकारी दिखती है.
सीएसएस का दस्तावेज़ देखना
सीएसएस के बारे में कम शब्दों में जानकारी देने वाली टूलटिप देखने के लिए, स्टाइल टैब में मौजूद प्रॉपर्टी के नाम पर कर्सर घुमाएं.
इस प्रॉपर्टी के बारे में MDN सीएसएस रेफ़रंस पर जाने के लिए, ज़्यादा जानें पर क्लिक करें.
टूलटिप बंद करने के लिए, 
न दिखाएं को चुनें.
इन्हें फिर से चालू करने के लिए, 
सेटिंग > प्राथमिकताएं > तत्व > 
सीएसएस के दस्तावेज़ का टूलटिप दिखाएं पर जाएं.
व्यू सिलेक्टर की खास जानकारी देखना
स्टाइल टैब में किसी सिलेक्टर पर कर्सर घुमाएं. इसमें नेस्ट किए गए सीएसएस नियमों में पैरंट सिलेक्टर, इनहेरिट किए गए नेस्ट किए गए नियम, और @nested-declarations नियम शामिल हैं. इससे आपको टूलटिप दिखेगी, जिसमें खास वेटेज और व्यूपोर्ट में मैच होने वाले एलिमेंट हाइलाइट होंगे.
कस्टम प्रॉपर्टी की वैल्यू देखना
टूलटिप में वैल्यू देखने के लिए, --custom-property पर कर्सर घुमाएं.
अमान्य, ओवरराइड की गई, इनऐक्टिव, और अन्य सीएसएस देखना
Styles टैब, सीएसएस से जुड़ी कई तरह की समस्याओं की पहचान करता है और उन्हें अलग-अलग तरीकों से हाइलाइट करता है.
स्टाइल टैब में सीएसएस को समझना देखें.
सिर्फ़ उस सीएसएस को देखना जो किसी एलिमेंट पर लागू की गई है
स्टाइल टैब में, किसी एलिमेंट पर लागू होने वाले सभी नियम दिखते हैं. इनमें वे एलान भी शामिल हैं जिन्हें बदल दिया गया है. अगर आपको बदले गए एलान में दिलचस्पी नहीं है, तो कैलकुलेट किया गया टैब का इस्तेमाल करें. इससे आपको सिर्फ़ वह सीएसएस दिखेगी जो किसी एलिमेंट पर लागू की जा रही है.
- कोई एलिमेंट चुनें.
- Elements पैनल में, Computed टैब पर जाएं.
सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.
'कंप्यूटेड' टैब में सीएसएस को समझना देखें.
सीएसएस प्रॉपर्टी को वर्णमाला के क्रम में देखना
Computed टैब का इस्तेमाल करें. सिर्फ़ वह सीएसएस देखें जो असल में किसी एलिमेंट पर लागू की गई है.
इनहेरिट की गई सीएसएस प्रॉपर्टी देखना
कैलकुलेट किया गया टैब में जाकर, सभी दिखाएं चेकबॉक्स पर सही का निशान लगाएं. सिर्फ़ वह सीएसएस देखना जो किसी एलिमेंट पर लागू की गई है देखें.
इसके अलावा, Styles टैब को स्क्रोल करें और Inherited from <element_name> नाम वाले सेक्शन ढूंढें.
सीएसएस के at-rules देखना
ऐट-रूल, सीएसएस स्टेटमेंट होते हैं. इनकी मदद से, सीएसएस के व्यवहार को कंट्रोल किया जा सकता है. तत्व > स्टाइल में, अलग-अलग सेक्शन में ये ऐट-रूल दिखते हैं:
@property at-rules देखें
@property सीएसएस ऐट-रूल की मदद से, सीएसएस की कस्टम प्रॉपर्टी को साफ़ तौर पर तय किया जा सकता है. साथ ही, उन्हें किसी भी JavaScript को चलाए बिना, स्टाइल शीट में रजिस्टर किया जा सकता है.
स्टाइल टैब में, ऐसी प्रॉपर्टी के नाम पर कर्सर घुमाएं. इससे आपको प्रॉपर्टी की वैल्यू, डिस्क्रिप्टर, और स्टाइल टैब के सबसे नीचे मौजूद, छोटा किए जा सकने वाले @property सेक्शन में उसके रजिस्ट्रेशन का लिंक दिखेगा.
किसी @property नियम में बदलाव करने के लिए, उसके नाम या वैल्यू पर दो बार क्लिक करें.
@supports at-rules देखें
स्टाइल टैब में, आपको @supports सीएसएस ऐट-रूल दिखते हैं. ये नियम, किसी एलिमेंट पर लागू होते हैं. उदाहरण के लिए, इस एलिमेंट की जांच करें:
अगर आपके ब्राउज़र पर lab() फ़ंक्शन काम करता है, तो एलिमेंट हरे रंग का होता है. अगर यह फ़ंक्शन काम नहीं करता है, तो एलिमेंट बैंगनी रंग का होता है.
@scope ऐट-रूल देखना
अगर किसी एलिमेंट पर सीएसएस @scope के ऐट-रूल लागू किए गए हैं, तो स्टाइल टैब में वे दिखते हैं.
नए @scope ऐट-रूल, सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 6 की खास जानकारी का हिस्सा हैं. इन नियमों की मदद से, सीएसएस स्टाइल को स्कोप किया जा सकता है. इसका मतलब है कि स्टाइल को खास एलिमेंट पर साफ़ तौर पर लागू किया जा सकता है.
नीचे दी गई झलक में, @scope नियम देखें:
- झलक में मौजूद कार्ड पर टेक्स्ट की जांच करें.
- Styles टैब में,
@scopeनियम ढूंढें.
इस उदाहरण में, @scope नियम, card क्लास वाले एलिमेंट के अंदर मौजूद सभी <p> एलिमेंट के लिए, ग्लोबल सीएसएस background-color डिक्लेरेशन को बदल देता है.
@scope नियम में बदलाव करने के लिए, उस पर दो बार क्लिक करें.
@font-palette-values at-rules देखें
@font-palette-values सीएसएस ऐट-रूल की मदद से, font-palette प्रॉपर्टी की डिफ़ॉल्ट वैल्यू को पसंद के मुताबिक बनाया जा सकता है. Elements > Styles, इस at-rule को एक खास सेक्शन में दिखाता है.
अगली झलक में @font-palette-values सेक्शन देखें:
- झलक में, टेक्स्ट की दूसरी लाइन की जांच करें.
- स्टाइल में,
@font-palette-valuesसेक्शन ढूंढें.
इस उदाहरण में, --New फ़ॉन्ट पैलेट की वैल्यू, रंगीन फ़ॉन्ट की डिफ़ॉल्ट वैल्यू को बदल देती हैं.
कस्टम वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.
@position-try at-rules देखें
position-try-options प्रॉपर्टी के साथ @position-try सीएसएस नियम का इस्तेमाल करके, एलिमेंट के लिए ऐंकर की वैकल्पिक पोज़िशन तय की जा सकती हैं. ज़्यादा जानने के लिए, सीएसएस ऐंकर पोज़िशनिंग एपीआई के बारे में जानकारी लेख पढ़ें.
एलिमेंट > स्टाइल, इन्हें हल और लिंक करता है:
position-try-optionsप्रॉपर्टी की वैल्यू को@position-try --nameसेक्शन में जोड़ें.position-anchorप्रॉपर्टी की वैल्यू औरanchor()आर्ग्युमेंट,popovertargetएट्रिब्यूट वाले एलिमेंट से मेल खाते हैं.
अगली झलक में, position-try-options वैल्यू और @position-try सेक्शन की जांच करें:
popover के साथ ऐंकर का इस्तेमाल करके डेमो- झलक में, सब-मेन्यू खोलें. इसके लिए, आपका खाता और फिर स्टोरफ़्रंट पर क्लिक करें.
- झलक में मौजूद
id="submenu"की मदद से, एलिमेंट की जांच करें. - स्टाइल में जाकर,
position-try-optionsप्रॉपर्टी ढूंढें और उसकी--bottomवैल्यू पर क्लिक करें. स्टाइल टैब आपको उससे जुड़े@position-tryसेक्शन पर ले जाता है. position-anchorवैल्यू लिंक या एक जैसेanchor()आर्ग्युमेंट पर क्लिक करें. एलिमेंट पैनल,popovertargetएट्रिब्यूट वाले एलिमेंट को चुनता है. साथ ही, स्टाइल टैब, एलिमेंट की सीएसएस दिखाता है.
वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.
किसी एलिमेंट का बॉक्स मॉडल देखना
किसी एलिमेंट का बॉक्स मॉडल देखने के लिए, Styles टैब पर जाएं. इसके बाद, ऐक्शन बार में मौजूद 
Show sidebar बटन पर क्लिक करें.
किसी वैल्यू को बदलने के लिए, उस पर दो बार क्लिक करें.
किसी एलिमेंट के सीएसएस को खोजना और फ़िल्टर करना
किसी खास सीएसएस सिलेक्टर (नेस्ट की गई नियमों में पैरंट सिलेक्टर भी शामिल हैं), प्रॉपर्टी या वैल्यू को खोजने के लिए, स्टाइल और कैलकुलेट किया गया टैब पर मौजूद फ़िल्टर बॉक्स का इस्तेमाल करें.
Computed टैब में, इनहेरिट की गई प्रॉपर्टी खोजने के लिए, Show All चेकबॉक्स पर सही का निशान लगाएं.
कैलकुलेट की गई टैब पर जाने के लिए, फ़िल्टर की गई प्रॉपर्टी को ग्रुप करें को चुनकर, छोटी की जा सकने वाली कैटगरी में ग्रुप करें.
फ़ोकस किए गए पेज को एम्युलेट करें
अगर फ़ोकस को पेज से DevTools पर स्विच किया जाता है, तो कुछ ओवरले एलिमेंट अपने-आप छिप जाते हैं. ऐसा तब होता है, जब वे फ़ोकस से ट्रिगर होते हैं. उदाहरण के लिए, ड्रॉप-डाउन सूचियां, मेन्यू या तारीख चुनने वाले टूल. फ़ोकस किए गए पेज को एम्युलेट करें विकल्प की मदद से, किसी एलिमेंट को डीबग किया जा सकता है. भले ही, वह फ़ोकस में हो.
इस डेमो पेज पर, फ़ोकस किए गए पेज को एम्युलेट करके देखें:
- इनपुट एलिमेंट पर फ़ोकस करें. इसके नीचे एक और एलिमेंट दिखता है.
- DevTools खोलें. अब पेज के बजाय DevTools विंडो पर फ़ोकस है. इसलिए, एलिमेंट फिर से गायब हो जाता है.
- Elements > Styles में जाकर, :hov पर क्लिक करें. इसके बाद, Emulate a focused page को चुनें. साथ ही, यह पक्का करें कि element is selected इनपुट element is selected चुना गया हो. अब इसके नीचे मौजूद एलिमेंट की जांच की जा सकती है.
आपको रेंडरिंग पैनल में भी यही विकल्प दिखेगा.
किसी एलिमेंट को फ़्रीज़ करने के अन्य तरीके जानने के लिए, स्क्रीन को फ़्रीज़ करना और गायब होने वाले एलिमेंट की जांच करना लेख पढ़ें.
किसी सूडो-क्लास को टॉगल करना
किसी स्यूडो-क्लास को टॉगल करने के लिए:
- कोई एलिमेंट चुनें.
- तत्व पैनल में, स्टाइल टैब पर जाएं.
- :hov पर क्लिक करें.
- उस स्यूडो-क्लास पर सही का निशान लगाएं जिसे चालू करना है.
इस उदाहरण में, देखा जा सकता है कि DevTools, एलिमेंट पर background-color डिक्लेरेशन लागू करता है. भले ही, एलिमेंट पर कर्सर न घुमाया गया हो.
स्टाइल टैब में, सभी एलिमेंट के लिए ये सूडो-क्लास दिखती हैं:
इसके अलावा, कुछ एलिमेंट की अपनी स्यूडो-क्लास हो सकती हैं. ऐसे एलिमेंट को चुनने पर, स्टाइल टैब में चुने गए एलिमेंट की स्थिति को ज़बरदस्ती लागू करें सेक्शन दिखता है. इसे बड़ा करके, एलिमेंट के लिए खास तौर पर बनाए गए सूडो-क्लास चालू किए जा सकते हैं.
इंटरैक्टिव ट्यूटोरियल के लिए, किसी क्लास में स्यूडोस्टेट जोड़ना लेख पढ़ें.
इनहेरिट किए गए हाइलाइट स्यूडो-एलिमेंट देखना
Pseudo-elements की मदद से, एलिमेंट के कुछ हिस्सों को स्टाइल किया जा सकता है. हाइलाइट किए गए सूडो-एलिमेंट, दस्तावेज़ के ऐसे हिस्से होते हैं जिनका स्टेटस "चुना गया" होता है. साथ ही, उपयोगकर्ता को यह स्टेटस दिखाने के लिए, उन्हें "हाइलाइट किया गया" के तौर पर स्टाइल किया जाता है. उदाहरण के लिए, ऐसे सूडो-एलिमेंट ::selection, ::spelling-error, ::grammar-error, और ::highlight हैं.
स्पेसिफ़िकेशन में बताया गया है कि जब कई स्टाइल आपस में मेल नहीं खाती हैं, तो कैस्केड से तय होता है कि कौनसी स्टाइल लागू होगी.
नियमों के इनहेरिटेंस और प्राथमिकता को बेहतर तरीके से समझने के लिए, इनहेरिट किए गए हाइलाइट स्यूडो-एलिमेंट देखे जा सकते हैं:
यहां दिए गए टेक्स्ट की जांच करें.
मैंने अपने पैरंट के हाइलाइट स्यूडो-एलिमेंट की स्टाइल इनहेरिट की है. मुझे चुनें!ऊपर दिए गए टेक्स्ट का कोई हिस्सा चुनें.
स्टाइल टैब में, नीचे की ओर स्क्रोल करके
Inherited from ::selection pseudo of...सेक्शन पर जाएं.
कैस्केड लेयर देखें
कैस्केड लेयर की मदद से, अपनी सीएसएस फ़ाइलों को ज़्यादा कंट्रोल किया जा सकता है. इससे स्टाइल-स्पेसिफ़िसिटी से जुड़ी समस्याएं नहीं होती हैं. यह बड़े कोडबेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल मैनेज करने के लिए मददगार है.
कैस्केड लेयर देखने के लिए, अगले एलिमेंट की जांच करें और Elements > Styles खोलें.
Styles टैब में, तीन कैस्केड लेयर और उनकी स्टाइल देखें: page, component, और base.
लेयर का क्रम देखने के लिए, लेयर के नाम या 
सीएसएस लेयर व्यू को टॉगल करें बटन पर क्लिक करें.
page लेयर की स्पेसिफ़िसिटी सबसे ज़्यादा है. इसलिए, एलिमेंट का बैकग्राउंड हरा है.
पेज को प्रिंट मोड में देखना
पेज को प्रिंट मोड में देखने के लिए:
- कमांड मेन्यू खोलें.
Renderingटाइप करना शुरू करें औरShow Renderingको चुनें.- सीएसएस मीडिया को एम्युलेट करें ड्रॉप-डाउन के लिए, प्रिंट करें को चुनें.
कवरेज टैब की मदद से, इस्तेमाल की गई और इस्तेमाल नहीं की गई सीएसएस देखना
कवरेज टैब से पता चलता है कि कोई पेज कौनसी सीएसएस का इस्तेमाल करता है.
- कमांड मेन्यू खोलने के लिए, DevTools पर फ़ोकस करते समय Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं.
coverageटाइप करना शुरू करें.
कवरेज दिखाएं को चुनें. आपको कवरेज टैब दिखेगा.
फिर से लोड करें पर क्लिक करें.
पेज फिर से लोड होता है और कवरेज टैब में यह खास जानकारी मिलती है कि ब्राउज़र से लोड की गई हर फ़ाइल से कितना सीएसएस (और JavaScript) इस्तेमाल किया गया है.
हरा रंग, इस्तेमाल की गई सीएसएस को दिखाता है. लाल रंग, इस्तेमाल नहीं की गई सीएसएस को दिखाता है.
किसी सीएसएस फ़ाइल पर क्लिक करके, ऊपर दी गई झलक में यह देखा जा सकता है कि उसमें किस सीएसएस का इस्तेमाल किया गया है.
स्क्रीनशॉट में,
devsite-google-blue.cssकी लाइन 55 से 57 और 65 से 67 का इस्तेमाल नहीं किया गया है. वहीं, लाइन 59 से 63 का इस्तेमाल किया गया है.
प्रिंट की झलक दिखाने वाले मोड को ज़बरदस्ती चालू करें
DevTools को प्रिंट की झलक वाले मोड में ज़बरदस्ती चालू करना देखें.
सीएसएस कॉपी करें
स्टाइल टैब में मौजूद एक ही ड्रॉप-डाउन मेन्यू से, अलग-अलग सीएसएस नियम, एलान, प्रॉपर्टी, वैल्यू कॉपी की जा सकती हैं
इसके अलावा, JavaScript सिंटैक्स में सीएसएस प्रॉपर्टी कॉपी की जा सकती हैं. अगर CSS-in-JS लाइब्रेरी का इस्तेमाल किया जा रहा है, तो यह विकल्प काम का है.
सीएसएस कॉपी करने के लिए:
- कोई एलिमेंट चुनें.
- Elements > Styles टैब में, किसी सीएसएस प्रॉपर्टी पर राइट क्लिक करें.
ड्रॉप-डाउन मेन्यू से, इनमें से कोई एक विकल्प चुनें:
- जानकारी कॉपी करें पर टैप करें. सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है:
css property: value; - प्रॉपर्टी कॉपी करें. सिर्फ़
propertyका नाम कॉपी करता है. - वैल्यू कॉपी करें. इससे सिर्फ़
valueकॉपी होता है. - नियम कॉपी करें. यह पूरी सीएसएस प्रॉपर्टी को कॉपी करता है:
css selector[, selector] { property: value; property: value; ... } - Copy declaration as JS. JavaScript सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है:
js propertyInCamelCase: 'value' - सभी एलान कॉपी करें. सीएसएस के नियम में मौजूद सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है:
css property: value; property: value; ... सभी एलान को JS के तौर पर कॉपी करें. JavaScript सिंटैक्स में सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
सीएसएस में हुए सभी बदलावों को कॉपी करें. स्टाइल टैब में किए गए बदलावों को सभी एलान में कॉपी करता है.
कंप्यूट की गई वैल्यू देखें. इससे आपको कैलकुलेट किया गया टैब पर ले जाया जाता है.
- जानकारी कॉपी करें पर टैप करें. सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है:
सीएसएस बदलना
इस सेक्शन में, एलिमेंट > स्टाइल में जाकर सीएसएस में बदलाव करने के सभी तरीके बताए गए हैं.
इसके अलावा, ये काम भी किए जा सकते हैं:
- पेज लोड होने पर सीएसएस को ओवरराइड करना.
- बदली गई सीएसएस को फ़ाइल फ़ोल्डर में मौजूद अपने लोकल सोर्स में सेव करें.
कोड पूरा होने की सुविधा की मदद से सीएसएस में बदलाव करना
ग्रेडिएंट या बॉक्स शैडो जैसी सीएसएस प्रॉपर्टी के ज़्यादा जटिल कॉम्बिनेशन के साथ एक्सपेरिमेंट करने के लिए, आपको उनके सटीक सिंटैक्स को याद रखने की ज़रूरत नहीं है. इसके अलावा, ग्रिड और फ़्लेक्स-लेआउट को तेज़ी से बनाने के लिए, कई मिलती-जुलती प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके लिए, सीएसएस प्रॉपर्टी टाइप करना शुरू करें और कोड पूरा करने की सुविधा का इस्तेमाल करें.
किसी एलिमेंट में सीएसएस डिक्लेरेशन जोड़ना
डिक्लेरेशन के क्रम से, एलिमेंट की स्टाइल पर असर पड़ता है. इसलिए, डिक्लेरेशन को अलग-अलग तरीकों से जोड़ा जा सकता है:
- इनलाइन एलान जोड़ें. यह एलिमेंट के एचटीएमएल में
styleएट्रिब्यूट जोड़ने के बराबर है. - स्टाइल रूल में कोई डिक्लेरेशन जोड़ना.
आपको कौनसा वर्कफ़्लो इस्तेमाल करना चाहिए? ज़्यादातर मामलों में, आपको इनलाइन डिक्लेरेशन वर्कफ़्लो का इस्तेमाल करना चाहिए. इनलाइन डिक्लेरेशन, बाहरी डिक्लेरेशन की तुलना में ज़्यादा खास होते हैं. इसलिए, इनलाइन वर्कफ़्लो यह पक्का करता है कि एलिमेंट में आपकी उम्मीद के मुताबिक बदलाव लागू हों. ज़्यादा जानकारी के लिए, सिलेक्टर के टाइप देखें.
अगर आपको किसी एलिमेंट की स्टाइल डीबग करनी हैं और यह देखना है कि अलग-अलग जगहों पर कोई डेक्लरेशन तय करने पर क्या होता है, तो दूसरे वर्कफ़्लो का इस्तेमाल करें.
इनलाइन एलान जोड़ना
इनलाइन एलान जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल टैब में, element.style सेक्शन के ब्रैकेट के बीच क्लिक करें. कर्सर फ़ोकस करता है, जिससे आपको टेक्स्ट डालने की सुविधा मिलती है.
- प्रॉपर्टी का नाम डालें और Enter दबाएं.
उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं. डीओएम ट्री में, आपको दिखेगा कि एलिमेंट में
styleएट्रिब्यूट जोड़ा गया है.
स्क्रीनशॉट में, चुने गए एलिमेंट पर
margin-topऔरbackground-colorप्रॉपर्टी लागू की गई हैं. डीओएम ट्री में, एलिमेंट केstyleएट्रिब्यूट में डिक्लेरेशन देखे जा सकते हैं.
स्टाइल के नियम में कोई एलान जोड़ना
किसी मौजूदा स्टाइल के नियम में एलान जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल टैब में, स्टाइल के उस नियम के ब्रैकेट के बीच में क्लिक करें जिसमें आपको एलान जोड़ना है. कर्सर फ़ोकस हो जाता है, जिससे आपको टेक्स्ट डालने की सुविधा मिलती है.
- प्रॉपर्टी का नाम डालें और Enter दबाएं.
- उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं.
स्क्रीनशॉट में, स्टाइल के नियम को नया border-bottom-style:groove एलान मिलता है.
डिक्लेरेशन का नाम या वैल्यू बदलना
किसी एलान के नाम या वैल्यू में बदलाव करने के लिए, उस पर दो बार क्लिक करें. किसी वैल्यू को 0.1, 1, 10 या 100 यूनिट तक तेज़ी से बढ़ाने या घटाने के शॉर्टकट के लिए, कीबोर्ड शॉर्टकट की मदद से, गिने जा सकने वाले मानों को बदलना देखें.
कीबोर्ड शॉर्टकट की मदद से, एन्यूमेरेबल वैल्यू बदलना
किसी डिक्लेरेशन की एन्यूमेरेबल वैल्यू में बदलाव करते समय, वैल्यू को एक तय संख्या से बढ़ाने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, font-size:
- 0.1 बढ़ाने के लिए, Option+Up (Mac) या Alt+Up (Windows, Linux) दबाएं.
- वैल्यू को 1 से बदलने के लिए, Up. अगर मौजूदा वैल्यू -1 और 1 के बीच है, तो वैल्यू को 0.1 से बदलने के लिए, Up.
- वैल्यू को 10 से बढ़ाने के लिए, Shift+Up दबाएं.
- वैल्यू को 100 से बढ़ाने के लिए, Shift+Command+Up (Mac) या Control+Shift+Page Up (Windows, Linux) दबाएं.
वैल्यू को घटाया भी जा सकता है. इसके लिए, पहले बताए गए Up के हर इंस्टेंस को Down से बदलें.
लंबाई की वैल्यू बदलना
अपने पॉइंटर का इस्तेमाल करके, लंबाई वाली किसी भी प्रॉपर्टी को बदला जा सकता है. जैसे, चौड़ाई, ऊंचाई, पैडिंग, मार्जिन या बॉर्डर.
लंबाई की इकाई बदलने के लिए:
- यूनिट के नाम पर कर्सर घुमाएं और देखें कि वह अंडरलाइन किया गया है.
ड्रॉप-डाउन से कोई यूनिट चुनने के लिए, यूनिट के नाम पर क्लिक करें.
लंबाई की वैल्यू बदलने के लिए:
- यूनिट वैल्यू पर कर्सर घुमाएं. देखें कि आपका पॉइंटर, दो सिरों वाले हॉरिज़ॉन्टल ऐरो में बदल गया है.
वैल्यू बढ़ाने या घटाने के लिए, हॉरिज़ॉन्टल तौर पर खींचें और छोड़ें.
वैल्यू को 10 से अडजस्ट करने के लिए, खींचते समय Shift को दबाकर रखें.
किसी एलिमेंट में क्लास जोड़ना
किसी एलिमेंट में क्लास जोड़ने के लिए:
- डीओएम ट्री में एलिमेंट चुनें.
- .cls पर क्लिक करें.
- नई क्लास जोड़ें बॉक्स में क्लास का नाम डालें.
- Enter दबाएं.
हल्के और गहरे रंग वाली थीम की प्राथमिकताओं को सिम्युलेट करता है. साथ ही, गहरे रंग वाले मोड को अपने-आप चालू होने की सुविधा को चालू करता है
गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा को टॉगल करने या हल्के या गहरे रंग वाली थीम के लिए उपयोगकर्ता की पसंद को एम्युलेट करने के लिए:
- Elements > Styles टैब में जाकर,
Toggle common rendering emulations पर क्लिक करें.
ड्रॉप-डाउन सूची से इनमें से कोई एक चुनें:
- prefers-color-scheme: light. इससे पता चलता है कि उपयोगकर्ता को हल्के रंग वाली थीम पसंद है.
- prefers-color-scheme: dark. इससे पता चलता है कि उपयोगकर्ता को गहरे रंग वाली थीम पसंद है.
- गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा. यह आपके पेज को गहरे रंग वाले मोड में दिखाता है. भले ही, आपने इसे लागू न किया हो. इसके अलावा,
prefers-color-schemeकोdarkपर अपने-आप सेट कर देता है.
यह ड्रॉप-डाउन, रेंडरिंग टैब के सीएसएस मीडिया फ़ीचर prefers-color-scheme और गहरे रंग वाले मोड को अपने-आप चालू होने की सुविधा विकल्पों का शॉर्टकट है.
किसी क्लास को टॉगल करना
किसी एलिमेंट पर क्लास को चालू या बंद करने के लिए:
- डीओएम ट्री में एलिमेंट चुनें.
- Element Classes सेक्शन खोलें. किसी एलिमेंट में क्लास जोड़ना लेख पढ़ें. नई क्लास जोड़ें बॉक्स के नीचे, वे सभी क्लास मौजूद होती हैं जो इस एलिमेंट पर लागू की जा रही हैं.
- आपको जिस क्लास को चालू या बंद करना है उसके बगल में मौजूद चेकबॉक्स को टॉगल करें.
स्टाइल का नियम जोड़ना
स्टाइल का नया नियम जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल का नया नियम
पर क्लिक करें. DevTools, element.style नियम के नीचे एक नया नियम जोड़ता है.
स्क्रीनशॉट में, DevTools नया स्टाइल नियम पर क्लिक करने के बाद, h1.devsite-page-title स्टाइल नियम जोड़ता है.
वह स्टाइल शीट चुनें जिसमें नियम जोड़ना है
नया स्टाइल नियम जोड़ते समय, नया स्टाइल नियम
पर क्लिक करके रखें. इससे आपको यह चुनने का विकल्प मिलेगा कि स्टाइल नियम को किस स्टाइल शीट में जोड़ना है.
एलान को टॉगल करना
किसी एक एलान को टॉगल करके चालू या बंद करने के लिए:
- कोई एलिमेंट चुनें.
- Styles टैब में, उस नियम पर कर्सर घुमाएं जो एलान को तय करता है. हर एलान के बगल में चेकबॉक्स दिखते हैं.
- घोषणा के बगल में मौजूद चेकबॉक्स पर सही का निशान लगाएं या हटाएं. किसी एलान को हटाने पर, DevTools उसे काट देता है. इससे पता चलता है कि वह अब चालू नहीं है.
स्क्रीनशॉट में, फ़िलहाल चुने गए एलिमेंट के लिए color प्रॉपर्टी को टॉगल करके बंद किया गया है.
ऐनिमेशन के दौरान, ::view-transition सूडो-एलिमेंट में बदलाव करना
ऐनिमेशन में इससे जुड़ा सेक्शन देखें.
ज़्यादा जानकारी के लिए, View Transitions API की मदद से, ट्रांज़िशन को आसान और बेहतर बनाना लेख पढ़ें.
ग्रिड एडिटर की मदद से, ग्रिड आइटम और उनके कॉन्टेंट को अलाइन करना
सीएसएस ग्रिड की जांच करें में इससे जुड़ा सेक्शन देखें.
कलर पिकर की मदद से रंग बदलना
कलर पिकर की मदद से, एचडी और नॉन-एचडी रंगों की जांच करना और उन्हें डीबग करना देखें.
ऐंगल क्लॉक की मदद से ऐंगल की वैल्यू बदलना
Angle Clock, सीएसएस प्रॉपर्टी की वैल्यू में <angle> बदलने के लिए जीयूआई उपलब्ध कराता है.
ऐंगल क्लॉक खोलने के लिए:
- ऐंगल के बारे में जानकारी देने वाला कोई एलिमेंट चुनें.
स्टाइल टैब में, वह
transformयाbackgroundएलान ढूंढें जिसमें आपको बदलाव करना है. ऐंगल की वैल्यू के बगल में मौजूद, ऐंगल की झलक बॉक्स पर क्लिक करें.
-5degऔर0.25turnके बाईं ओर मौजूद छोटी घड़ियां, ऐंगल की झलक दिखाती हैं.ऐंगल क्लॉक खोलने के लिए, झलक पर क्लिक करें.
ऐंगल क्लॉक सर्कल पर क्लिक करके, ऐंगल की वैल्यू बदलें. इसके अलावा, माउस को स्क्रोल करके भी ऐंगल की वैल्यू को 1 से बढ़ाया या घटाया जा सकता है.
ऐंगल की वैल्यू बदलने के लिए, और भी कीबोर्ड शॉर्टकट उपलब्ध हैं. स्टाइल पैनल के कीबोर्ड शॉर्टकट के बारे में ज़्यादा जानें.
शैडो एडिटर की मदद से, बॉक्स और टेक्स्ट की शैडो बदलना
शैडो एडिटर, text-shadow और box-shadow सीएसएस के एलान में बदलाव करने के लिए, जीयूआई उपलब्ध कराता है.
शैडो एडिटर की मदद से शैडो बदलने के लिए:
शैडो डिक्लेरेशन वाला कोई एलिमेंट चुनें. उदाहरण के लिए, अगला एलिमेंट चुनें.
स्टाइल टैब में,
text-shadowयाbox-shadowडिक्लेरेशन के बगल में मौजूद शैडो
आइकॉन ढूंढें.
शैडो एडिटर खोलने के लिए, शैडो आइकॉन पर क्लिक करें.
शैडो की प्रॉपर्टी बदलें:
- टाइप (सिर्फ़
box-shadowके लिए). आउटसेट या इनसेट चुनें. - X और Y ऑफ़सेट. नीले बिंदु को खींचें और छोड़ें या वैल्यू डालें.
- धुंधला करें. स्लाइडर को खींचें और छोड़ें या कोई वैल्यू डालें.
- स्प्रेड (सिर्फ़
box-shadowके लिए). स्लाइडर को खींचें और छोड़ें या कोई वैल्यू डालें.
- टाइप (सिर्फ़
element में किए गए बदलावों को देखें.
ईज़िंग एडिटर की मदद से, ऐनिमेशन और ट्रांज़िशन के समय में बदलाव करना
ईज़िंग एडिटर, transition-timing-function और animation-timing-function की वैल्यू बदलने के लिए जीयूआई उपलब्ध कराता है.
ईज़िंग एडिटर खोलने के लिए:
- टाइमिंग फ़ंक्शन के एलान वाले किसी एलिमेंट को चुनें. जैसे, इस पेज पर मौजूद
<body>एलिमेंट. - स्टाइल टैब में,
transition-timing-function,animation-timing-functionडिक्लेरेशन याtransitionशॉर्टहैंड प्रॉपर्टी के बगल में मौजूद बैंगनी रंग का
आइकॉन ढूंढें.
- ईज़िंग एडिटर खोलने के लिए, आइकॉन पर क्लिक करें:
समय में बदलाव करने के लिए, प्रीसेट का इस्तेमाल करना
एक क्लिक में टाइमिंग अडजस्ट करने के लिए, ईज़िंग एडिटर में मौजूद प्रीसेट का इस्तेमाल करें:
- ईज़िंग एडिटर में, कीवर्ड वैल्यू सेट करने के लिए, पिकर बटन में से किसी एक पर क्लिक करें:
- लीनियर
- ease-in-out
- ease-in
- ease-out
- लीनियर
प्रीसेट स्विचर में,
या 
बटन पर क्लिक करके, इनमें से कोई एक प्रीसेट चुनें:- लीनियर प्रीसेट:
elastic,bounceयाemphasized. - क्यूबिक बेज़ियर प्रीसेट:
- लीनियर प्रीसेट:
| समय से जुड़ा कीवर्ड | प्रीसेट | क्यूबिक बेज़ियर |
|---|---|---|
| ease-in-out | इन आउट, साइन | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| इन आउट, क्वाड्रेटिक | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| इन आउट, क्यूबिक | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| तेज़ी से कम होना, धीरे-धीरे बढ़ना | cubic-bezier(0.4, 0, 0.2, 1) |
|
| In Out, Back | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| ease-in | इन, साइन | cubic-bezier(0.47, 0, 0.75, 0.72) |
| इन, क्वॉड्रेटिक | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| इन, बैक | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| तेज़ी से कम होना, धीरे-धीरे बढ़ना | cubic-bezier(0.4, 0, 1, 1) |
|
| ease-out | Out, Sine | cubic-bezier(0.39, 0.58, 0.57, 1) |
| आउट, क्वाड्रेटिक | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| आउट, क्यूबिक | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| लीनियर आउट, स्लो इन | cubic-bezier(0, 0, 0.2, 1) |
|
| एक ही जगह पर शुरू और खत्म होती है | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
कस्टम टाइमिंग कॉन्फ़िगर करना
टाइमिंग फ़ंक्शन के लिए कस्टम वैल्यू सेट करने के लिए, लाइनों पर मौजूद कंट्रोल पॉइंट का इस्तेमाल करें:
लीनियर फ़ंक्शन के लिए, लाइन पर कहीं भी क्लिक करके कंट्रोल पॉइंट जोड़ें और उसे खींचें और छोड़ें. पॉइंट हटाने के लिए, दो बार क्लिक करें.
क्यूबिक बेज़ियर फ़ंक्शन के लिए, किसी एक कंट्रोल पॉइंट को खींचें और छोड़ें.
किसी भी बदलाव से, एडिटर में सबसे ऊपर मौजूद झलक में बॉल ऐनिमेशन ट्रिगर होता है.
(एक्सपेरिमेंट के तौर पर उपलब्ध सुविधा) सीएसएस में किए गए बदलावों को कॉपी करना
इस एक्सपेरिमेंट के चालू होने पर, स्टाइल टैब में आपके सीएसएस बदलावों को हरे रंग में हाइलाइट किया जाता है.
सीएसएस डिक्लेरेशन में किए गए किसी एक बदलाव को कॉपी करने के लिए, हाइलाइट किए गए डिक्लेरेशन पर कर्सर घुमाएं. इसके बाद, 
कॉपी करें बटन पर क्लिक करें.
सभी सीएसएस बदलावों को एक साथ कॉपी करने के लिए, किसी भी एलान पर राइट क्लिक करें और सीएसएस में हुए सभी बदलावों को कॉपी करें को चुनें.
इसके अलावा, बदलाव टैब की मदद से, किए गए बदलावों को ट्रैक किया जा सकता है.