CSS क्या है ? CSS का उपयोग क्यों किया जाता है?

नमस्कार दोस्तो इस लेख में आप जानेंगे CSS क्या है तथा CSS का उपयोग क्यों किया जाता है। पहली सबसे जरूरी बात आपको सीएसएस के बारे में जानकारी क्यों होनी चाहिए। अगर आप HTML सीख चुके है और website का एक basic structure तैयार कर लेते है। तो आपके लिए सीएसएस सीखना फायदेमंद है । अब यह क्यों फायदेमंद है, इसके बारे में हम आपको नीचे बताएंगे।

दूसरी जरूरी बात अगर आप एक IT के student है या coding वगैरह में आपका दिमाग बहुत तेज दौड़ता है। theme, apps, website, games ऐसी चीज़ें आप खुद बनाना चाहते है। तो भी CSS सीखना आपके लिए फायदेमंद होगा। अब तीसरी सबसे जरूरी बात अगर आप css सीख कर एक professional web designer बन गए तो आप दूसरे लोगो की website design करके एक अच्छी खासी earning भी कर सकते है।

एक web designer भारत मे कम से कम 50000 income हर महीने लेता है। कहने का तात्पर्य यह कि इस छेत्र में future scope भी बहुत अच्छा है। अब जब एक चीज़ सीखने के इतने फायदे है। तो चलिए बिना समय गवायें इसकी शुरुआत सीएसएस क्या है यह जानने से करते है।

सीएसएस क्या है? (What is CSS in Hindi)

CSS का full form Cascading Style Sheet है। CSS एक Simple design language है। जो web pages को प्रस्तुत करने की प्रक्रिया को सरल बनाने के लिए बनाई गई है। css का उपयोग कर आप web pages के color, font का style, paragraph के बीच दूरी इत्यादि नियंत्रित कर सकते है। कहने का तात्पर्य यह है। सीएसएस एक web page के design को आकषर्ण बना देती है। सीएसएस के बाकी उपयोगों के बारे में हम नीचे विस्तार से बात करेंगे।

• प्रोग्रामिंग क्या है जाने
• Web Designing क्या है?
• C लैंग्वेज क्या है
• Python क्या है पूरी जानकारी 

अब बात CSS History की हो तो CSS का अविष्कार 10 अक्टूबर 1994 को Håkon Wium Lie ने किया था । सीएसएस को maintain करने के लिए W3C के भीतर एक group बनाया गया जिसका नाम CSS working group रखा गया। इस group का काम specification document बनाना था यही वह group है, जो सीएसएस को update करता रहता है। सीएसएस के काम करने के मुख्य तीन प्रकार है। जो नीचे बताये गए है।

सीएसएस के प्रकार – Types of CSS in Hindi

मूलतः सीएसएस तीन प्रकार की होती है:

1. Inline Style Sheet

इस Style Sheet की मदद से inline style को web pages में वही इस्तेमाल किया जाता है जहाँ इसकी जरूरत होती है। inline style sheet का उपयोग आप किसी particular html element को configure करने के लिए use कर सकते है। Inline css आपको स्वतंत्रता प्रदान करता है किसी भी एक element को परिवर्तित करने की। इसकी खासियत यह है, कि जब हम किसी एक element को परिवर्तित करते है, तो इससे बाकी दूसरे elements में कोई बदलाव नही होता है।

2. Embedded or Internal style sheet

इन style sheet का उपयोग pages के top (head section) में किया जाता है। Internal style sheet को <style> element के भीतर रखा जाता है। इस type की style sheet का rule पेज के सभी element पर लागू होता है। जब हम style element उपयोग करते है, तो साथ मे इसमे type attribute भी इस्तेमाल होता है । यहां type attribute specify करता है कि document में किस प्रकार की style शामिल की जाये।

3. External Style Sheet

यह सीएसएस की सबसे Interesting Style Sheet है। इसमें हम एक separate file में CSS coding करके उसे “.css extension” के साथ save कर देते है। अब जब भी हम <link> element की मदद से CSS file को html file से जोड़ते है तो पूरी html file पर इस css file का प्रभाव पड़ता है। ऐसा इसलिए किया जाता है जब आप किसी website के design को एक – एक करके परिवर्तित करने के बजाय एक बार मे ही बदलना चाहे।

तो अब तक आप सीएसएस क्या होता है “CSS in Hindi” यह जान ही चुके होंगे। तो चलिये अब इस लेख को आगे बढ़ाते है और जानते है सीएसएस का उपयोग क्यों किया जाता है।

सीएसएस का उपयोग क्यों किया जाता है?

अब तक तो आप जान ही चुके होंगे कि सीएसएस क्या है, व इसका उपयोग किसी web page को design देंने जैसे – उसका page layout, text color, font and text style की formatting के लिए किया जाता है। CSS एक बेहद powerful style sheet language है, जिससे हम लिखे गए content के look व feel को control कर सकते है। मान लीजिये आपके पास कोई website element (title) है।

• Html Tags क्या है? 
• Html Attribute क्या होते है

अब अगर हम इस title element के size, color को बदलना व इसके चारों ओर padding करना चाहे तो हम यहा अपने इस element का रूप बदलने के लिए सीएसएस का उपयोग करेंगे। Web designing के लिए सीएसएस क्यों महत्वपूर्ण है इसका अंदाजा आप CSS के फायदे जानकर आसानी लगा सकते है।

CSS के फायदे – Benefits

• समय की बचत– css एक properties को set करने के लिए बहुत flexibility प्रदान करता है। आप एक बार सीएसएस लिखने बाद उस same code को html element के कई समूहों पर लागू कर सकते है। यही नही बल्कि बाद में दूसरे web pages में भी इस code का पुनः उपयोग किया जा सकता है। कहने का तात्पर्य यह है आप css के उपयोग से अपने समय की बहुत बचत कर सकते है।
• Page के load time को कम करता है– सीएसएस इस्तेमाल करने का यह एक बड़ा फायदा है। CSS से pages को Design करने में बहुत कम codes की जरूरत पड़ती है। एक web page में कम codes का मतलब है, कि वह fast load होगा।
• Maintain करने में आसान– css के द्वारा किसी document को maintain करना काफी आसान है। सीएसएस में सिर्फ एक बदलाव से आप उस document के कई pages को तुरंत update कर सकते है।
• Bandwidth की बचत– एक high traffic website के लिए bandwidth काफी मायने रखती है। अगर आप page के layout के लिए table की जगह css का उपयोग करेंगे तो इससे उस file आकार में 50% तक कमी आयेगी।
• सभी device के लिए अनुकुल– सीएसएस के उपयोग से एक ही web page को multiple device compatibility दी जा सकती है। जिससे वह web page सभी डिवाइस computer, phones, print में उसके हिसाब से ही देखा जा सके।
• Search engine ranking में सुधार– एक website के लिये traffic ही सब कुछ है। लेकिन traffic तभी आयेगा जब उस वेबसाइट के page किसी search engines में पहले rank करेंगे। CSS के इस्तेमाल से search engines का उस वेबसाइट को access करना आसान हो जाता है। जिससे वह उस पेज को जल्दी access करके rank कर देता है।

सीएसएस कैसे सीखें – Learn CSS in Hindi

HTML सीखने से शुरुवात करे- अगर आप html सिख चुके है तो इस step को आप skip कर सकते है। परन्तु अगर आप बिल्कुल शुरुवात कर रहे है, तो आपको html जरूर सीखनी चाहिए। html एक बहुत सरल markup language है। HTML क्या है इस पोस्ट को पढ़कर आप आसानी से जान जाएंगे। html सीखने के बाद आपको coding का बहुत हद तक idea हो जाएगा।  यह idea आपको मदद करेगा सीएसएस सीखने में।

एक सबसे महत्पूर्ण बात बिना html सीखे आप css का इस्तेमाल नही कर सकते। इसकी एक वजह है html का उपयोग होता है, web page का structure बनाने में जैसे – head area , footer area और content area . वही सीएसएस का उपयोग होता है, उस Structure को बेहतरीन design देने के लिए। इसलिए बिना html के आप css का उपयोग नही कर सकते।

सीएसएस के Basics सीखे- css course लेने या किसी css book ख़रीदने से पहले css के basics को सीखे। internet पर हजारो free websites available है। जिनकी help से आप सीएसएस के basics आसानी से सिख सकते है। w3school.com, tizag.com जैसी websites में सीएसएस के complete codes व उनके examples को अच्छे से समझाया गया है। css basics सीखने का सबसे बड़ा फायदा यह होगा कि, आप सीएसएस के बारे में अधिक जानकारी जुटा पाएंगे।

CSS Couching ले या books खरीदे- ऐसा नही है, की आप internet से या YouTube में css tutorial देखकर सीएसएस नही सिख सकते। परन्तु अगर आपके आस – पास कोई अच्छा Couching center है, तो उसे join करे। इसका सबसे बड़ा benefit यह है कि, वहां का माहौल बिल्कुल school class की तरह होगा। जिससे आप जल्दी और आसानी से सीएसएस सिख जाएंगे। आप online couching भी ले सकते है। lynda.com, udemy.com एक paid websites है, जिनकी service बहुत अच्छी रहती है।

CSS Codes की practice करे- यह सबसे जरूरी step है। अगर आप सच मे एक pro web designer बनना चाहते है। तो css codes को बार – बार practice करे। coding एक ऐसी चीज़ है, जब तक आप इसमे experiments नही करेंगे यह आपके पल्ले नही पड़ेगी। css की practice करने के लिए आप notepad text editor या notepad++ का सहारा ले सकते है।

CSS codes को लिखने के बाद इसे हमेशा .css file extension से save करे। इसके बाद आप इस file को अपनी html file से link कर उसे Web browser में run करे। browser आपको इसका output show कर देगा। धीरे – धीरे आप इनकी practice करते जाए और तब एक दिन ऐसा आएगा जब आप सीएसएस पूरी तरह से सीख चुके होंगे।

खुद एक website बनाये- सीएसएस सीखने में सबसे ज्यादा आपको यही step मदद करेगा। जैसे – जैसे आप सीएसएस सीखते जाए उसे अपनी खुद की एक website बनाने में उपयोग करे। इसका सबसे बड़ा फायदा यह होगा कि, आपको codes के काम करने के तरीको के बारे में पता चलेगा। बार-बार website में experiment करने से आपके लिए आगे चलकर website design करना बहुत सरल हो जाएगा।

यह तो थे तरीके जिनकी मदद से आप सीएसएस सीख सकते है। इसके साथ ही आप इस पोस्ट कोडिंग कैसे सीखते हैं? को भी जरूर पढ़े। जिसके अंतर्गत हमने कुछ मुख्य स्टेप्स के बारे में बताया है, जो किसी भी कोडिंग लैंग्वेज को सीखने में आपकी मदद करेंगे। चलिये अब html व css में  difference को समझते है। दोनों के बीच क्या भेद है, इसको जानने के बाद आपको इन दोनों की value और इनको एक साथ कैसे use करे इस बारे में पता चलेगा।

HTML व CSS के बीच क्या difference (अंतर) है।

1) HTML व CSS के बीच पहला अंतर html किसी web page के content और Structure को चित्रित करता है। बल्कि css html element के design and display को modify करता है।

2) इनके बीच दूसरा अंतर सीएसएस का उपयोग html files में किया जा सकता है। परंतु css style sheets में html का उपयोग नही किया जा सकता है।

3) HTML व CSS के बीच तीसरा अंतर html elements को इस्तेमाल करने की कोई method नही होती है। बल्कि css के codes को implement करने के लिए Inline CSS code, Internal and external stylesheet किसी भी method का use किया जा सकता है।

4) इनके बीच चौथा अंतर html में tags उपयोग में आते है। html tag मौलिक रूप से keyword (tag name) हैं जो angular brackets में संलग्न होते हैं और आमतौर पर एक जोड़े में आते हैं। जैसे – opening tag

<tagname> closing tag </ tagname>

जबकि सीएसएस में selectors होते है जो  code block को represent करते है। css codes को curly brackets { } के भीतर लिखा जाता हैं। सीएसएसCaCM code को styel देने के लिए हम इन्हें properties और value से define करते है। properties और value के बीच हम कोलन : बिंदु लगाते है।

Slectors{ properties:value }

• जावा क्या है और कैसे सीखे
• PHP क्या है कैसे सीखे

आपने क्या जाना

इस लेख के माध्यम से आपने जाना कि CSS क्या है व CSS का उपयोग क्यों किया जाता है। साथ ही साथ हमने कुछ और related topic जैसे के के प्रकार, सीएसएस के फायदे व HTML एंव CSS के बीच क्या difference है यह भी जाना । उम्मीद है यह लेख आपके लिए helpful रहा होगा । किसी भी तरह के question के लिए आप हमें नीचे comment कर पूछ सकते है। .