A

CSS क्या है और कैसे सीखे? | What is CSS in Hindi

CSS क्या है: वर्तमान युग टेक्नोलॉजी का है। हम आए-दिन ऐसे बहुत टेक्नोलॉजी के चीज़े यूज़ करने लगते है जिनके नाम तक हमे पता नही होते। ऐसा ही एक वर्ड है CSS जिसके बारे में आप जानते हुए भी अनजान है। तो आजके इस पोस्ट में हम css के बारे में ही बात करेंगे। आगे बताया गया है कि css क्या है और css कैसे सीख सकते है?

हम मोबाइल से हर दिन यूटूब , वेबसाइट पर विजिट करते ही रहते है। ऐसे में आपके मन मे कभी न कभी तो यह सवाल जरूर आया होगा आखिर यूट्यूब को कैसे बनाया गया होगा? वैसे आपके जानकारी के लिए बता दु यूटूब भी एक प्रकार का वेबसाइट ही है। 

हर वेबसाइट को बनाया जाता है कोडिंग या machine language से। मशीन लैंग्वेज के मतलब होते है हार्डवेयर के लिए use किये जानेवाले भाषा। ऐसे लैंग्वेज में कॉडर कोई तरह के command होते है जो कि system यानी हार्डवेयर प्रोसेस करते है और उसके आउटपुट यानी रिजल्ट हम तक पहुचता है। 

यह जितनी भी वेबसाइट आप इंटरनेट पर देखते है, सारी ही ऐसी कोडिंग लैंग्वेज से बने होते है। वैसे तो कोई प्रकार के कोडिंग लैंग्वेज के उपयोग से किसी भी वेबसाइट को बनाया जाता है लेकिन इनके base के शुरुवात HTML से ही होते है। 

Html एक ब्राउज़र लैंग्वेज है जिससे वेबसाइट की लेआउट बनाया जाता है। हमने html के ऊपर पहले से ही आर्टिकल लिख कर रखे है, इसे पढ़े – HTML क्या है?

HTML से किसी भी वेबसाइट के लेआउट बनाने के बाद हमें CSS की जरूरत पड़ते है, ताकि उस वेबसाइट को डिज़ाइन कर सके। 

यानी कि css भी html के तरह एक machine language में ही आते है जिसके उपयोग से किसी भी वेबसाइट को या वेब पेजेज को डिज़ाइन किया जाता है। Hope, आप थोड़ा css के आईडिया ले पाए होंगे। चलिए css के बारे में डिटेल्स में जानते है। 

CSC Full Form | सीएसएस फुल फॉर्म

  • Css के full form है cascading Stylesheet.
  • सीएसएस के फूल फॉर्म है कैसेकेडिंग स्टाइलशीट

CSS क्या है? What is CSS in Hindi

css kya hai

CSS, वेबसाइट में डिज़ाइनिंग के लिए यूज़ किये जानेवाले एक तरह के ब्राउज़िंग लैंग्वेज है। इसके इस्तेमाल से आप वेबसाइट के लेआउट को डिज़ाइन कर सकते हो। जैसे कि आपको किसी HTML एलिमेंट में color ऐड करना हो, Font-Size में चंगेज़ लाना है या padding margin देना हो इस तरह के स्टाइल आप CSS से कर पाते हो

CSS कोड को रन करने के लिए किसी तरह के सर्वर की जरूरत नही पड़ते। CSS कोड को आप किसी text editor में लिख सकते और फ़ाइल को .css extension से ब्राउज़र पर run कर सकते है। यह लैंग्वेज पूरी तरह से HTML पर ही डिपेंड होते है, आप HTML को न लिखे CSS को रन नही कर पाते हो। 

इसीलिए CSS को सीखने से पहले HTML सीखना जरूरी होते है। और HTML, CSS और Javascript के मदत से आप किसी भी वेबसाइट को बना सकते हो। यह तीनों लैंग्वेज Web designing में आते है।  

Css क्या है यह तो आप समझ ही गए होंगे। अब इसके कुछ हिस्ट्री के बात कर लेते है।

CSS को आप HTML के छोटे बहन मान सकते हो। इसके विकाश 10 ऑक्टोबर 1994 में श्री Hakon Wium Lie द्वारा किया गया था। हालांकि इसके पहला version CSS level 1 को 1996 में W3C द्वारा प्रकाशित किया गया था। Css को मेंटेन करने के लिए W3C द्वारा एक ग्रुप बनाया गया जिसका नाम रखा गया CSS Working ग्रुप । इस ग्रुप का काम specification document बनाना था। और यही ग्रुप CSS के को अपडेट करता रहता है। 

अभी CSS के लेटेस्ट version CSS3 चल रहा है। इससे पहले CSS के तिन वर्शन आ चुका है, CSS Level 1, CSS Level 2 और CSS Level 2.1 .

अन्य आर्टिकल :

html and css difference

CSS और HTML में अंतर

अगर आपको HTML के थोड़े से भी नॉलेज है तो आपको पता होगा कि HTML में भी ऐसे कोई सारे एलिमेंट होते जिससे भी डिज़ाइन दे पाते है। ऐसे में आपके मन मे सवाल आ रहा होगा आखिर क्यों CSS के जरूरत है? हम तो HTML से भी डिजाईन दे सकता हूँ!

पहला बात तो यह है कि html मे स्टाइल के लिए सीमित एलिमेंट ही होते है और यह एलिमेंट के यूज़ वेबपेज के साइज को बड़ा देते है। दूसरी बात यह है कि अगर आप इन एलिमेंट से वेबसाइट को डिज़ाइन करते हो तो आपको बहुत ज्यादा दिक्कत आ जायेगा। जैसा कि मान लो आपके वेबसाइट पर 50 पेज है तो आपको 50 पेजेज में अलग अलग से डिज़ाइन देना पड़ेगा। लेकिन CSS से आप एक पेज के डिज़ाइन करके सारी पेजेज में वह लागू कर सकते हो। 

  • HTML : Content : HTML से आप ब्राउज़र को कमांड दे सकते हो कि आपके वेबसाइट के लेआउट कैसा होगा, कौनसा एलिमेंट कहाँ रहेगा जैसे कि आप चाहते है H1 टैग को ऊपर रखना, इमेज को मिडिल पर रखना तो यह html से कर सकते हो।
  • CSS : Design :  लेकिन अगर आपके वेब पेज के एलिमेंट को डिज़ाइन देना है तो आप आपको CSS के कमांड देना पड़ेगा। जैसे आप चाहते हो हैडिंग के color रेड हो, Font-Size बड़ा हो या थोड़ा Margin चाहते हो, इस तरह के style CSS से दे पाते हो।
  • जैसे कि आप हमारे इस वेब पेज को देख सकते हो। इसमे HTML से सिर्फ ब्राउज़र को बताया गया है कि कौनसा हैडिंग है, कौनसा इमेज , कौनसा पैग्राफ और CSS से यह बताया गया है कि इस एलिमेंट के साइज कितना होगा कॉलोर कितना होगा, position, padding margin सब css से कमांड दिया गया है।

CSS क्यों उपयोग करे, इसके फायदे ? 

CSS के उपयोग के कोई सारे फायदे हो सकते है। यह वेबसाइट की पेज कि स्पीड से लेकर यूजर को अच्छा लुक देता है। CSS यूज़ करने के दो बड़े फायदे नीचे बताया गया है – 

  • वेबसाइट के पेज स्पीड बड़ जाते है : ऐसा इसीलिए कि आप HTML के अलग अलग फ़ाइल को css के एक ही फाइल से लिंक कर सकते हैं। जिससे होता ये कि जब विजिटर आपके वेबसाइट तक पहुचता है तो ब्राउज़र html और css दोनों फ़ाइल को डाऊनलोड कर लेते है और css file को cache में सेव हो जाते है। इसके बाद अगर आप उस वेबसाइट के कोई ओर पेजेज को विजिट करते हो तो दुवारा css फ़ाइल को डाऊनलोड करने के जरूरत नही पड़ते। इससे वेबसाइट के पेज स्पीड लोड होते हैं। इसके अलावा अगर आप सिर्फ html के element को यूज़ करते हो तो per pages के लिए बार बार सारी style को डाउनलोड करना पड़ेगा, जो पेज के स्पीड में इम्पैक्ट करते है। 
  • डिवाइस के हिसाब से पेज को शो करते है : आप सभी जानते है कंप्यूटर स्क्रीन के साइज और मोबाईल स्क्रीन के साइज में कितना फ़र्क़ है। ऐसे में आपको कंप्यूटर और मोबाइल स्क्रीन के according वेबसाइट को डिज़ाइन करना होता है और यह काम css से किया जाता है। और इसीलिए आप किसी भी वेबसाइट के look कंप्यूटर और मोबाइल पर अलग अलग पाते है।
  • CSS के आप कोई तरह के framework इस्तेमाल कर सकते है। CSS के एक popular Framework है Bootstrap फ्रेमवर्क का मतलब होते है पहले से बनाये हुए कोड(style) जिसे आप कुछ id class से आपने वेबपेज में दिखा सकते है।

CSS के प्रकार | Types of CSS 

CSS  को तीन प्रकार से लिखा जाता है। 

  • Internal Stylesheet CSS
  • External Stylesheet CSS और 
  • Inline Stylesheet CSS

आईये इन तीनो प्रकार को अच्छे से समझते है।

Internal CSS Code : इंटरनल के मतलब होते है एक ही फ़ाइल में कोड को लिखना। इंटरनल कोड हमेशा वेब पेज की Head section में <style></style> टैग के बीच लिखे जाते है। इंटरनल css कोड के उदाहरण नीचे दिए गए कोड से अनुमान लगा सकते हो।

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial </title>
<style>
h1 { font-size : 17px; 
    color : red ;
 }
p {
  Color : Green ;
   Font-family : verdana;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
internall css stylesheet

External CSS Code: इसमे कोड को दूसरे फ़ाइल पर लिखे जाते है और .css extention सेव किया जाता है। इसके बाद इस फ़ाइल को बाकी फ़ॉलो के साथ <link> टैग के द्वारा जोड़ा जाता है।  यह लिंक टैग वेब पेज के head section में रहते हैं। उदाहरण के लिए नीचे देखे – 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS Code: इसमे टैग के अंदर ही style लगाकर css स्टाइल को लागू किया जाता है उदाहरण के लिए नीचे दिए गए कोड को देखे – 

CSS कोड को सबसे पहले inline से ही सीखना पड़ते है और इसके इंटरनल में प्रैक्टिस किया जाता है। और फिर एक्सटर्नल की ओर जाना होता है। इंटरनेट पर मौजूद हर एक वेबसाइट external css फ़ाइल से ही बने होते है।

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 style=" color : Red, ">This is a heading</h1>
<p style=" font-size : 65px;"> Ths business</p>

</body>
</html>
inline css style sheet

CSS के कुछ एलिमेंट के बारे में  

  • Width : इससे टैग के width सेट कर सकते हो जैसे कि आप इमेज टैग की width 640PX रखना चाहते हो तो आप उसे एइसे लिख कर रख सकते हो. [ img {width : 640px; ]
  • Height : Width की तरह आप Element के height भी सेट कर सकते हो[ img { height : 120px; ]
  • Font : CSS के जड़ीये आप किसी भी एलिमेंट के font को भी बदल सकते हो. जैसे कि मान लो आपको font-family select करना है तो आप इस तरह से कोड लिखकर बदल पाते हो. [ p { font-family : Arial; } ]
  • Margin : मार्जिन के मद्लब होते है एलिमेंट को एक जगह से मूव करवाना. [ H1 { Margin : 2 3 2 3 px } ]
  • इसी तरह से एइसे बहुत css stylesheet के एलिमेंट होते है जिससे आप वेब पेजेज को डिजाईन दे पाते हो.

CSS कैसे सीखें? 

Css क्या है इस बारे में आप समझ ही गए होंगे। अब बात करते है इसे कैसे सीखा जाए। 

Css को सीखने के लिए हम आपको 3 प्लेटफार्म के बात करेंगे। 

सबसे पहले तो आप web designing के कॉर्से जॉइन कर सकते हो जिसमे आपको html, css javascript के बारे में सिखया जाएगा। ज्यादातर वेब डिजाइनिंग कॉर्से फीस 6 हज़ार के करीब होते है और इन कॉर्सेस के समय सीमा 2 महीने के आसपास रहते है। 

दूसरा प्लेटफॉर्म है यूट्यूब । यूट्यूब पर भी ऐसे चैनल है जो प्रोग्रामिंग लैंग्वेज सिखाते है तो आप इन्हें भी फॉलो कर सकते है। 

और तीसरा प्लेटफार्म है वेबसाइट। ऐसे बहुत सारे वेबसाइट है जो फ्री में css या अन्य प्रोग्रामिंग लैंग्वेज के कॉर्सेस प्रोवाइड करते है। आप उन्हें भी जॉइन कर सकते है। साथ ही साथ आप W3School के वेबसाइट पर जाकर सिख सकते है और प्रैक्टिस भी कर पाते है। 

आपके सुविधा के लिए हमने एक वीडियो को एम्बेड किया जिसके समय सीमा 1 घंटे के आसपास है। आओ उसे देखकर भी CSS को सिख सकते है। 

आज अपने क्या सीखा?

तो मुझे आशा है CSS क्या है, Css कैसे काम करते है CSS से जुड़ी काफी जानकारी आपतक पहुँच गए होंगे। अगर आपको लगता है हमने आपके लिए कोई वैलुएबल जानकारी दिए है तो आप पोस्ट को जरूर से शेयर करे। 

और अगर आपको अभी भी css की लेकर कोई डाउट है तो हमे कमेंट करके पूछ सकते हो। धन्यवाद 

Suraj Debnath

नमस्कार दोस्तों | मैं सूरज नाथ इस ब्लॉग के संस्थापक और लेखक हूँ | मुझे लिखने में बहुत रूचि है और अभी तक हमने जो कुछ भी सिखा उसी को इस ब्लॉग के माध्यम से आप तक पहुँचाता हूँ | Join Us on- Facebook
View All Articles