Dash में CSS बेसिक्स

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

CSS क्या है?

'Cascading Style Sheets' का संक्षेप
वेब पेज के एलिमेंट्स का लुक और लेआउट नियंत्रित करता है

हम नियंत्रित कर सकते हैं:
- टेक्स्ट गुण (फ़ॉन्ट साइज, रंग, स्टाइल)
- HTML एलिमेंट्स का साइज और शेप
- ऑब्जेक्ट्स की प्लेसमेंट

वेब पर CSS

अधिकांश वेबसाइट्स में CSS फाइलें होती हैं;

ये पेज लोड पर पढ़ी जाती हैं
इस कोर्स में: इसके बजाय style प्रॉपर्टी

Google के होमपेज का स्क्रीनशॉट जहाँ Chrome DevTools खुले हैं और एक टैग दिख रहा है जो स्टाइलशीट से लिंक करता है. कोड नोट करता है "<link type="text/css" rel=Stylesheet href=" और href के बाद CSS फाइल लोकेशन का लिंक

HTML एलिमेंट्स पर CSS

CSS को किसी HTML एलिमेंट पर भी लगाया जा सकता है

टैग की style प्रॉपर्टी उपयोग करें
CSS को key-value पेयर्स रूप में स्वीकारता है
- स्टेटमेंट्स: "property:value; property:value;"

अध्याय 1 के लेसन का HTML स्क्रीनशॉट जिसने अलग-अलग साइज के, बैकग्राउंड रंग वाले कई div बनाए. यह HTML पर style प्रॉपर्टी के उपयोग को दिखाता है.

कुछ CSS स्टाइलिंग

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

काले रंग में शीर्षक "Welcome to the website!" और उसके नीचे, लाल रंग में, बड़े फ़ॉन्ट में "Enjoy your stay!"

लाइव CSS एडिट करना

हम लाइव वेबसाइट पर कुछ CSS एडिट कर सकते हैं

किसी एलिमेंट पर राइट-क्लिक > 'Inspect' चुनें > कोई CSS वैल्यू एडिट करें
नोट - यह केवल लोकल बदलाव है (रिफ्रेश पर गायब)

Google के होमपेज का GIF जहाँ लोगो पर राइट-क्लिक करके 'inspect' चुना जाता है. नीचे Google Developer Tools खुलते हैं. इसमें इमेज की width स्टाइल 100 पिक्सल सेट की जाती है, जिससे इमेज तुरंत छोटी हो जाती है.

Dash में CSS

Dash कंपोनेंट्स का style आर्ग्युमेंट
- CSS को dictionary के रूप में स्वीकारता है
पिछले कोड में Dash कंपोनेंट:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]

रंग के लिए CSS

CSS से आप सेट कर सकते हैं:

किसी ऑब्जेक्ट का बैकग्राउंड रंग (background-color)
टेक्स्ट का रंग (color)

दोनों में strings (जैसे 'red') या RGB कोड्स (जैसे 'rgb(0,0,255)' यानी blue) स्वीकार होते हैं

दो कॉलम की तालिका: बाएँ पक्ष में रंग भरे हुए, दाएँ में उनके RGB कोड्स. बैंगनी, हरा, गहरा गुलाबी, और गहरा नीला सेल्स उनके संबंधित RGB कोड्स के साथ.

साइज के लिए CSS

CSS width और height प्रॉपर्टीज़ से साइज सेट कर सकता है

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

प्रतिशत के रूप में CSS साइज

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

parent element साइज का 50%

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना