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

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

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

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

CSS क्या है ? CSS के प्रकार।

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

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

CSS के प्रकार ।

मूलतः css तीन प्रकार की होती है।

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 Styel Sheet .

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

तो अब तक आप CSS क्या होता है ( what is CSS ) यह जान ही चुके होंगे। तो चलिये अब इस लेख को आगे बढ़ाते है और जानते है CSS का उपयोग क्यों किया जाता है।

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

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

CSS के फायदे ।

  • समय की बचत– css एक properties को set करने के लिए बहुत flexibility प्रदान करता है। आप एक बार css लिखने बाद उस same code को html element के कई समूहों पर लागू कर सकते है। यही नही बल्कि बाद में दूसरे web pages में भी इस code का पुनः उपयोग किया जा सकता है। कहने का तात्पर्य यह है आप css के उपयोग से अपने समय की बहुत बचत कर सकते है।
  • Page के load time को कम करता है– CSS इस्तेमाल करने का यह एक बड़ा फायदा है। CSS से pages को Design करने में बहुत कम codes की जरूरत पड़ती है। एक web page में कम codes का मतलब है, कि वह fast load होगा।
  • Mainten करने में आसान– css के द्वारा किसी document को mainten करना काफी आसान है। css में सिर्फ एक बदलाव से आप उस document के कई pages को तुरंत update कर सकते है।
  • Bandwidth की बचत– एक high traffic website के लिए bandwidth काफी मायने रखती है। अगर आप page के layout के लिए table की जगह css का उपयोग करेंगे तो इससे उस file आकार में 50% तक कमी आयेगी।
  • सभी device के लिए अनुकुल– css के उपयोग से एक ही 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 कर देता है।

» Html Tags क्या है? 

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

CSS कैसे सीखें ? 

⇒ HTML सीखने से शुरुवात करे- अगर आप html सिख चुके है तो इस step को आप skip कर सकते है। परन्तु अगर आप बिल्कुल शुरुवात कर रहे है, तो आपको html जरूर सीखनी चाहिए। html एक बहुत सरल markup language है। html क्या है ?  इस पोस्ट को पढ़कर आप आसानी से जान जाएंगे । html सीखने के बाद आपको coding का बहुत हद तक idea हो जाएगा ।   यह idea आपको मदद करेगा css सीखने में । एक सबसे महत्पूर्ण बात बिना html सीखे आप css का इस्तेमाल नही कर सकते । इसकी एक वजह है। html का उपयोग होता है, web page का structure बनाने में जैसे – head area , footer area और content area . वही css का उपयोग होता है, उस Structure को बेहतरीन design देने के लिए । इसलिए बिना html के आप css का उपयोग नही कर सकते ।

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

⇒ CSS Couching ले या books खरीदे- ऐसा नही है, की आप internet से या youtube में css tutorial देखकर css नही सिख सकते । परन्तु अगर आपके आस – पास कोई अच्छा Couching center है, तो उसे join करे। इसका सबसे बड़ा benefit यह है कि, वहां का माहौल बिल्कुल school class की तरह होगा । जिससे आप जल्दी और आसानी से css सिख जाएंगे। आप online couching भी ले सकते है। www.lynda.com, www.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 कर उसे browser में run करे। browser आपको इसका output show कर देगा । धीरे – धीरे आप इनकी practice करते जाए और तब एक दिन ऐसा आएगा जब आप css पूरी तरह से सीख चुके होंगे।

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

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

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

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

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

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

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

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

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

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

GOODBYE

1 thought on “CSS क्या है ? CSS का उपयोग क्यों किया जाता है?”

Leave a Comment

Your email address will not be published. Required fields are marked *