गाइड / वेब की बुनियादी बातें

CSS की बुनियाद: रंग, फ़ॉन्ट और लेआउट

CSS से वेब पेज के रंग, फ़ॉन्ट और लेआउट कैसे तय होते हैं, असली Kodebloc वेबसाइटों पर समझिए।

CSS क्या करता है

HTML बताता है कि पेज पर क्या है: एक हेडिंग, एक पैराग्राफ़, एक फ़ोटो। CSS बताता है कि वह सब दिखता कैसा है। रंग, फ़ॉन्ट, चीज़ों के बीच की जगह और हर हिस्सा कहां बैठेगा, यह सब CSS तय करता है। CSS का पूरा नाम है Cascading Style Sheets।

एक ही HTML अलग CSS के साथ बिल्कुल अलग दिख सकता है। नीचे की दोनों वेबसाइटें Kodebloc ने एक ही मैसेज से बनाई हैं, "पुणे में मेरी बेकरी के लिए वेबसाइट"। दोनों में मेन्यू, बड़ी हेडिंग, छोटा पैराग्राफ़ और एक फ़ोटो है। दोनों का माहौल इतना अलग CSS की वजह से है।

CSS रूल कैसे लिखें

CSS रूल के दो हिस्से होते हैं। सिलेक्टर बताता है कि किन एलिमेंट को स्टाइल करना है। कर्ली ब्रैकेट के अंदर लिखे डिक्लेरेशन बताते हैं कि क्या बदलना है। हर डिक्लेरेशन में एक प्रॉपर्टी, एक कोलन, एक वैल्यू और एक सेमीकोलन होता है।

h1 {
  color: #1f2a5c;
  font-size: 48px;
}

यह रूल हर <h1> को नेवी ब्लू और 48 पिक्सेल ऊंचा बनाता है। CSS पेज के head में एक <style> एलिमेंट के अंदर रह सकता है, या किसी अलग फ़ाइल में, जिसका लिंक पेज में दिया गया हो।

क्लास: कुछ ही एलिमेंट

अक्सर आप सारे नहीं, सिर्फ़ कुछ एलिमेंट को स्टाइल करना चाहते हैं। इसके लिए HTML में उन एलिमेंट को एक class दीजिए, फिर उस क्लास के लिए रूल लिखिए। क्लास सिलेक्टर एक बिंदु (डॉट) से शुरू होता है।

<p class="special">Today: rose and pistachio croissant</p>

.special {
  background-color: #ffd9c2;
  font-weight: bold;
}

एक एलिमेंट की कई क्लास हो सकती हैं, बीच में स्पेस देकर। कई एलिमेंट एक ही क्लास इस्तेमाल कर सकते हैं। इसी तरह पूरी वेबसाइट एक जैसी दिखती है।

रंग

CSS में रंग कुछ तरीकों से लिखा जा सकता है:

• नाम से, जैसे red या navy।
• हेक्स कोड से, जैसे #2f7d4f। इसमें दो-दो अक्षरों की जोड़ी लाल, हरा और नीला बताती है।
• rgb() वैल्यू से, जैसे rgb(47, 125, 79), जो वही हरा रंग है।

आप सबसे ज़्यादा दो प्रॉपर्टी इस्तेमाल करेंगे: टेक्स्ट के लिए color और उसके पीछे की जगह के लिए background-color। जो भी रंग चुनें, ध्यान रखिए कि टेक्स्ट अपने बैकग्राउंड पर आसानी से पढ़ा जा सके। हमारी एक्सेसिबिलिटी गाइड बताती है कि यह कैसे जांचें।

फ़ॉन्ट

body {
  font-family: "Public Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

font-family फ़ॉन्ट चुनता है। दूसरा नाम, sans-serif, बैकअप है, अगर पहला फ़ॉन्ट लोड न हो। font-size टेक्स्ट का साइज़ तय करता है, और line-height लाइनों के बीच की जगह। करीब 1.5 की लाइन हाइट से पैराग्राफ़ पढ़ना काफ़ी आसान हो जाता है।

Kodebloc अपने फ़ॉन्ट Google Fonts से लोड करता है, हर वेबसाइट में ज़्यादा से ज़्यादा तीन फ़ॉन्ट फ़ैमिली। आम तरीका है हेडिंग के लिए एक फ़ॉन्ट और बाकी टेक्स्ट के लिए दूसरा। ऊपर की दोनों बेकरी में ठीक यही फ़र्क है।

जगह और बॉक्स मॉडल

CSS के लिए हर एलिमेंट एक चौकोर बॉक्स है। हर बॉक्स की चार परतें होती हैं, अंदर से बाहर की ओर:

1. Content: खुद टेक्स्ट या तस्वीर।
2. Padding: बॉक्स के अंदर की जगह, कंटेंट और किनारे के बीच।
3. Border: padding के चारों ओर एक लाइन, चाहें तो।
4. Margin: बॉक्स के बाहर की जगह, जो दूसरे बॉक्स को दूर रखती है।

.card {
  padding: 24px;
  border: 2px solid #16211b;
  border-radius: 16px;
  margin-bottom: 32px;
}

Padding से बटन या कार्ड खुला-खुला लगता है। Margin सेक्शन को एक-दूसरे पर चढ़ने नहीं देता। border-radius कोनों को गोल करता है: Crumb & Chai के ब्लॉक में बड़े गोल कोने हैं, जबकि Sumi Bakehouse के कोने चौकोर हैं।

flexbox से लेआउट

Flexbox चीज़ों को एक लाइन या एक कॉलम में सजाता है। किसी पैरेंट बॉक्स पर display: flex लगाइए, और उसके चाइल्ड एलिमेंट अगल-बगल आ जाते हैं।

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

justify-content: space-between पहले चाइल्ड को बाईं ओर और आखिरी को दाईं ओर ले जाता है, जैसे एक तरफ़ लोगो और दूसरी तरफ़ मेन्यू के लिंक। align-items: center उन्हें ऊपर-नीचे से बीच में लाता है। gap चाइल्ड एलिमेंट के बीच जगह देता है।

grid से लेआउट

Grid चीज़ों को एक साथ लाइनों और कॉलम में रखता है। कार्ड के सेट या फ़ोटो गैलरी के लिए यह बढ़िया है।

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

इससे तीन बराबर कॉलम बनते हैं। 1fr का मतलब है "खाली जगह का एक हिस्सा"। चीज़ों की एक लाइन के लिए flexbox लीजिए, और जब लाइनें और कॉलम दोनों चाहिए, तब grid।

Kodebloc का CSS

Kodebloc की वेबसाइटें Tailwind CSS इस्तेमाल करती हैं। रूल किसी अलग जगह लिखने की जगह, Tailwind ढेर सारी छोटी-छोटी तैयार क्लास देता है, और हर क्लास एक ही काम करती है। आप उन्हें सीधे HTML एलिमेंट पर लगाते हैं। Kodebloc के अंदाज़ में लिखी एक हेडिंग देखिए:

<h1 class="font-display text-5xl font-bold text-ink">
  Back on the road by Friday.
</h1>

हर क्लास सादे CSS के एक टुकड़े के बराबर है। font-bold का मतलब है font-weight: 700। text-5xl बड़ा फ़ॉन्ट साइज़ देता है। font-display और text-ink वेबसाइट के अपने फ़ॉन्ट और रंग हैं, जिन्हें पेज में ऊपर एक छोटे सेटिंग्स वाले हिस्से में नाम दिए गए हैं। कुछ और जो आपको दिखेंगी:

• px-6: बाएं और दाएं 24px की padding।
• py-20: ऊपर और नीचे 80px की padding।
• rounded-2xl: गोल कोने।
• flex items-center justify-between: ऊपर वाली flexbox लाइन।
• grid gap-10: ऐसी grid जिसके आइटम के बीच जगह हो।
• hover:bg-accent: माउस ऊपर आने पर बैकग्राउंड बदलना।

Plus और Pro में, एडिटर में आपकी वेबसाइट के नाम वाले मेन्यू से Download चुनते हैं, तो Kodebloc इन क्लास को आम CSS रूल में बदलकर फ़ाइल के एक <style> एलिमेंट में डाल देता है। इस तरह आप दोनों देख सकते हैं: हर एलिमेंट पर लगी क्लास, और उनके पीछे का सादा CSS।

आज़माइए

अपनी Kodebloc वेबसाइट का लुक बदलने के लिए आपको CSS लिखने की ज़रूरत नहीं। अब जब आप ये शब्द जानते हैं, तो चैट से बदलाव मांगते समय आप ठीक-ठीक बता सकते हैं:

• "कार्ड में padding बढ़ाइए और कोने थोड़े कम गोल कीजिए।"
• "हेडिंग के लिए सेरिफ़ फ़ॉन्ट लगाइए, बाकी टेक्स्ट का फ़ॉन्ट वैसा ही रहने दीजिए।"
• "मेन्यू के आइटम तीन कॉलम की grid में दिखाइए।"