Css क्या हैं? Web Developer बनने के लिए Css सीखना क्यों ज़रूरी हैं?

कंप्यूटर और उससे सम्बंधित सामान
कंप्यूटर डेस्क और एक्सेसरीज

Learn CSS इन Hindi- नमस्कार दोस्तोंस्वागत हैं आपका हमारे CSS हिंदी Tutorial में इस पोस्ट में हम जानेंगे CSS के बारे में इसके अलावा What is CSS(सीएसस क्या हैं)एक Web-Developer  बनने के लिए आपको CSS सीखना क्यों ज़रूरी हैंवर्तमान में CSS के कौनसे संस्करण का उपयोग किया जा रहा हैंऔर How to Link CSS File To Html (एक एचटीएमएल फाइल को सीएसएस से लिंक कैसे करते हैं)


What Is CSS- (सीएसएस क्या हैं)

दोस्तों, सीएसएस का पूरा नाम Cascading Style Sheets हैं, ये एक मार्कअप लैंग्वेज हैं Html की तरह, जिसका उपयोग हम हमारे वेबपेज को अच्छे से डिजाईन करने के लिए करते हैं, सीएसस के ज़रिये हम एचटीएमएल के टैग्स या एलेमेंट्स को अपने मन-मुताबिक स्टाइलिंग देते हैं, जिससे वेबपेज सुंदर दिखता हैं|

दोस्तों Html का काम वेबपेज के कंटेंट को दिखाना होता हैं, के हमारे वेबपेज में पैराग्राफ दिखेगा, इमेज दिखेगी, विडियो दिखेगी, लेकिन CSS का काम Html कंटेंट को कैसे दिखाना है और कहाँ पर दिखाना हैं होता हैं मसलन जो पैराग्राफ एचटीएमएल के ज़रिये डाला गया है, उसका फॉण्ट-साइज़ क्या होगा, फॉण्ट-फॉण्ट-फॅमिली क्या होगी, इसके अलावा विडियो फ्रेम की लम्बाई क्या होगी, चौड़ाई क्या होगी, वेबसाइट में किस रंग के फॉण्ट का यूज़ किया जाएगा, ये हम CSS की सहायता से सुनिश्चित करते हैं|

आपको Web-Developer बनने के लिए CSS सीखने की क्या ज़रूरत हैं?

दोस्तों, आज दुनिया की हर वेबसाइट मालिक की एक-दूसरे से इस बात की होड़ हैं, कि उनकी वेबसाइट बाकी सभी वेबसाइट से सबसे अच्छी हैं, एक अच्छी वेबसाइट होने से मतलब हैं जिसका यूजर इंटरफ़ेस बहुत अच्छा, सुन्दर और समझने में आसान हो, तभी कोई विजिटर उनकी वेबसाइट पर आएगा|

हम सिर्फ Html का उपयोग करके भी वेबसाइट बना सकते हैं, लेकिन वो वेबसाइट एक सफ़ेद कोरे कागज़ की तरह होगी, और कोई भी उस वेबसाइट पर जाना पसंद नही करेगा| अब आप खुद सोचकर देखो क्या आप एक ऐसी वेबसाइट पर जाना पसंद करोगे, जिसका ना कोई रंग और ना ही रूप बस कंटेंट को डाल दिया गया हैं|

मुझे आपका जवाब पहले से पता हैं, और वो हैं नहींइसलिए सभी कंपनिया और हर एक व्यक्ति अपनी वेबसाइट को सुन्दर और व्यवस्थित दिखाने के लिए एक ऐसे Web-Developer को ढूँढगे, जिसे CSS का अच्छा ख़ासा ज्ञान हो|

इसलिए आपको भी CSS सीखने की ज़रूरत हैं, ताकि आप भी Website Content को सुन्दर और अपने मन-मुताबिक दिखा सको|

How To CSS File To Html File (एक सीएसएस फाइल को एचटीएमएल फाइल के साथ लिंक कैसे करते हैं)

दोस्तों, हम तीन तरीकों से हमारी Html File में CSS Styles को apply कर सकते हैं, और वो तरीके हैं:
  • 1.    Internal Style
  • 2.    Inline Style
  • 3.    External Stylesheet
इस पोस्ट में हम एक्सटर्नल स्टाइलशीट को हमारी Html File से लिंक करना सीखेंगे|

एक्सटर्नल स्टाइलशीट- एक्सटर्नल स्टाइलशीट एक अलग CSS फाइल होती हैं, जिसे हम एक Link Tag की मदद से हमारे Html File में जोड़ते हैं| एक्सटर्नल स्टाइलशीट में हम सिर्फ CSS का कोड लिखते हैं, लेकिन फाइल का एक्सटेंशन .css ही होना चाहिए|

आप अपनी सीएसएस और एचटीएमएल फाइल का नाम कुछ भी रखो, लेकिन ध्यान रहे एचटीएमएल फाइल का एक्सटेंशन .html और सीएसएस फाइल का एक्सटेंशन .css होना ही चाहिए, गलत एक्सटेंशन या एक्सटेंशन गलत लिखने की स्थिति में आपकी एचटीएमएल और सीएसएस फाइल ठीक से काम नहीं कर पायेंगे|

एचटीएमएल फाइल को css फाइल के साथ लिंक करना-
1. एचटीएमएल फाइल को सीएसएस फाइल से लिंक करने के लिए आपको सबसे पहले अपना टेक्स्ट कोड एडिटर को ओपन करना पड़ेगा|
2.  फिर आपको 2 नई फाइल बनानी पड़ेगी, जिसमें एक फाइल का एक्सटेंशन .html और एक  फाइल का एक्सटेंशन .css होगा|

एचटीएमएल और सीएसएस फाइल एक्सटेंशन के साथ
एचटीएमएल और सीएसस फाइल्स
3.  फिर आपको हेड tag के अन्दर एक link tag बनाना पड़ेगा, और उसके अन्दर आपको 3  एट्रिब्यूट लिखने होंगे, जो होंगे:
4.   rel attribute (b.) type attribute (c.) href attribute
   
लिंक टैग से एचटीएमएल फाइल को सीएसएस फाइल के साथ लिंक करना
लिंक टैग के ऐट्रिब्यूट्स और उनकी वैल्यू 

5.  rel attribute – rel attribute में आपको stylesheet वैल्यू को डबल कोट्स में लिखना होता हैं, rel attribute आपके करंट डॉक्यूमेंट (एचटीएमएल फाइल) और आपके लिंक किये जाने वाले डॉक्यूमेंट (सीएसस फाइल) के बीच के सम्बन्ध (रिलेशनशिप) को बताता हैं|

6.  type attribute – type attribute में आपको text/css वैल्यू को डबल कोट्स में लिखना होता हैं, type attribute आपकी सीएसस फाइल का type डिफाइन करता हैं, जो कि सीएसस फॉर्मेट या कोड में होगा|

7.  सरल शब्दों में कहूँ तो type attribute आपकी सीएसस फाइल में लिखे जाने वाले टेक्स्ट या कोड को सीएसस की कोडिंग के रूप में दिखाएगा|

8.  href attribute – href attribute आपकी सीएसस फाइल को आपकी एचटीएमएल फाइल से लिंक करने का काम करेगा, आपको href attribute के अन्दर डबल कोट्स में आपकी सीएसस फाइल का लोकेशन या आपने अपनी सीएसस फाइल को जिस जगह पर सेव करके रखा हुआ हैं, वो लिखना पड़ेगा|

9.  अगर आपने अपनी सीएसस फाइल को उसी फोल्डर में सेव करके रखा हैं, जहाँ पर आपकी एचटीएमएल फाइल भी सेव हैं तो आपको अपनी css फाइल का पूरा एड्रेस नही देना पड़ेगा, लेकिन अगर आपने अपनी सीएसस फाइल को अपनी एचटीएमएल फाइल से अलग किसी अलग फोल्डर में रखा हैं, तो आपको फिर अपनी सीएसस फाइल का पूरा एड्रेस href attribute के डबल कोट्स में लिखना पड़ेगा|

10. एक बार rel, type और href attribute में वैल्यूस को लिखने के बाद आपको चेक कर लेना चाहिए, कि आपकी सीएसस फाइल आपके एचटीएमएल फाइल से लिंक हुई हैं या नहीं|

11.  यहाँ मैंने सीएसस फाइल में बॉडी tag को बैकग्राउंड कलर देने की कोडिंग की है, और आप देख सकते हैं, कि मेरी एचटीएमएल फाइल का बैकग्राउंड कलर सफलतापूर्वक बदल गया हैं, इसका मतलब हैं, मेरी एचटीएमएल फाइल मेरी सीएसस फाइल से अच्छे से लिंक हो गयी हैं|
सीएसएस कोड जिससे बॉडी का बैकग्राउंड कलर चेंज हो सकेगा
सीएसएस कोडिंग
बॉडी कलर का बदल जाना सीएसएस कोड के सही से अप्लाई होने पर
बॉडी का कलर सीएसएस कोड के बाद

तो दोस्तोंइस तरह हम अपनी एचटीएमएल फाइल को अपनी एक्सटर्नल सीएसस फाइल के साथ लिंक करते हैं|
अभी तक सीएसस के तीन संस्करण दुनिया के सामने प्रस्तुत किया जा चुके हैं, जिसमें वर्तमान में हम CSS 3 का उपयोग कर रहे हैं, सीएसस थ्री पहले दोनों सीएसस के संस्करणों कही ज्यादा विकसित, सुधार और नई प्रॉपर्टीज के साथ आया हैं. CSS 3 के टुटोरिअल आपको आगे भी मिलते रहेंगे

तो दोस्तों, इस तरह हमनें इस पोस्ट में जाना What is CSS, (सीएसस क्या हैं), एक Web-Developer  बनने के लिए आपको CSS सीखना क्यों ज़रूरी हैं, वर्तमान में CSS के कौनसे संस्करण का उपयोग किया जा रहा हैं, इसके अलावा How to Link CSS File To Html ( एक एचटीएमएल फाइल को सीएसएस से लिंक कैसे करते हैं )|

आशा करता हूँ आपको ये पोस्ट अच्छी लगी होगी, और आपको कुछ नया ज़रूर सीखने को मिला होगा, आप इस पोस्ट को अपने दोस्तों और साथियों के साथ और अपने सभी सोशल मीडिया एकाउंट्स पर ज़रूर शेयर करें|
आपका ये पोस्ट पढने के लिए बहुत-बहुत धन्यवाद|


SHARE THIS
Previous Post
Next Post