What is CSS in Hindi – CSS Kya Hai | पूरी जानकारी

What is CSS in Hindi

HTML क्या है ये जानने के बाद हम अब किसी भी HTML plain वेब पेज को CSS के द्वारा डिज़ाइन, coloring कैसे करते है इसके बारे में जानेंगे लेकिन यदि आप HTML को जाने बिना ही इस आर्टिकल को पढ़े रहे है तो आपको CSS क्या है और कैसे यूज की जाती है इसके बारे में कुछ भी समज नहीं आएगा इसलिए हमारे एचटीएमएल वाले आर्टिकल को जरूर पढ़े.

जब हम इंटरनेट पर किसी वेबसाइट को देखते है जिसमे काफी सारे कलर्स कॉम्बिनेशन होते है, वेबसाइट अच्छेसे से डिज़ाइन की गयी होती है, तो उसे देखके हमारे मुँह से एक ही शब्द निकलता है wow! और हम सोचते है कितनी अच्छी वेबसाइट है और जो भी हम पढ़ रहे है वो कितना क्लियरली दिख रहा है. लेकिन एक सवाल हमारे मन में हमेशा रहता है की ऐसी वेबसाइट बनती कैसे होगी? लोग इतने अच्छेसे इसे डिज़ाइन कैसे करते होंगे? तो इसका मेरे पास एक ही जवाब है और वोह है CSS Web development language.

किसी भी वेबसाइट को डिज़ाइन करने में सिर्फ इसी वेब लैंग्वेज का हाथ होता है, मतलब की अगर CSS ना होती तो हमे सिर्फ वेबसाइट पर एक plain जानकारी दिखायी देती, जैसे की white पेपर पर black टेक्स्ट। ना कोई कलर ना कोई भी formating. सिर्फ ब्लैक कलर और उसके पीछे white background. ऐसे जानकारी को कौन पढ़ना चाहेगा। इसलिए यदि आप एक successful वेब developer बनना चाहते है या फिर आप कोई वेबसाइट बनाने के बारे में सोच रहे है तो आपको HTML और CSS के बारे में जानकारी होनी ही चाहिए।

इसलिए इस आर्टिकल को अंत तक जरूर पढ़े क्योंकि CSS क्या है और कैसे यूज की जाती है इसकी जानकारी के साथ मैंने कुछ महत्वपूर्ण सवाल भी पोस्ट में add किये है, जिससे आपके इसके प्रति सभी डाउट clear हो जायेंगे। तो चलिए सबसे पहले जानते है CSS क्या है (What is CSS in Hindi) 

What is CSS in Hindi

What is CSS in Hindi

CSS का full form होता है Cascading Style Sheet. जो basically किसी भी वेबपेज को डिज़ाइन करने के लिए यूज की जाती हैं. और इसे वेब language मे कहे तो ये HTML documents को स्टाइल करने के लिए यूज की जाती हैं.

जरूर पढ़े-

इसके अलावा ये web language हमें बताती हैं की कोई भी वेबसाइट यूजर को कैसी दिखनी चाहिए.

अब उदाहरण के लिए मानलो आपने एक वेबसाइट को ओपन किया और ओपन करने करने के बाद आपको सबसे पहले जो पेज दिखाई दे रहा हैं, जैसे की आप मेरे वेबसाइट पर इस आर्टिकल के पेज को पढ़ रहे हैं, तो इसे एक Webpage कहते हैं. और उस वेबसाइट मे आपने किसी और link पर क्लिक किया तो वोह एक webpage हो गया. मेरे केहने का मतलब ये हैं की ऐसे ही multiple webpages से website को बनाया जाता हैं. और उसमे जो भी Text format मे आपको दीखता हैं वोह एक HTML document होता हैं और जो भी design दिखती हैं वोह CSS के द्वारा की जाती हैं.

मतलब की HTML से सिर्फ content या जानकारी को add किया जाता हैं या webpage को आकार दिया जाता हैं और CSS के जरिये उसे design करके नयी पहचान दि जाती हैं.

इसके अलावा और एक बात आपको ध्यान मे रखनी हैं की CSS के बिना एक वेबपेज या website तयार की जा सकती हैं लेकिन बिना HTML के CSS को यूज नहीं कर सकते. क्यों की design करने के लिए हमें HTML के contents (tags) से access लेना होता हैं और अगर HTML पेज ही ना हो तो CSS के होने का भी कोई मतलब नहीं रहेगा.

अगर आप confused हो रहे हैं तो निचे के screenshot को देखने के बाद आपका doubt clear हो जायेगा-

Example of Website With Screenshot

Webpage Without CSS ( Only HTML)

Without css

With CSS (उपर के HTML page को स्टाइल करने के बाद)

With css

हमारी human body भी एक HTML की तरह ही हैं, खाना नहीं खाओ तो HTML और खाना खाने के बाद, exercise करने के बाद HTML + CSS

Another example

Simple CSS Example

samp.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #333;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
color: yellow;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

run this code>>

ऊपर दिए example को आप रन करके देखने के बाद समझेंगे की HTML के tags को या contents को कैसे एक्सेस किया जाता है.

यह एक Internal CSS का उदाहरण जैसे जिसमे हमने html के पेज में ही CSS के code को add करके इस पेज को डिज़ाइन किया है. ऐसे और 2 तरीके है जहा पर हम CSS को यूज कर सकते है. लेकिन सबसे पहले हम इस ऊपर के example को समझते है.

Example का Explanation

इस HTML page के example में हमने <head> </head> tag के अंदर एक और tag बनाया है जिसे style कहते है. यदि आपने HTML का tutorial पढ़ा होगा तो आपको tags क्या होते है यह अलग से बताने की जरूरत नहीं होगी।

किसी भी HTML पेज को बनाने के लिए Tags के जरूरत होती है, मतलब की इस कोड को लिखने के लिए tags ही एकमात्र चीज है जिससे वेबपेज बनाया जाता है.

<tagname>……conten…</tagname>

हर टैग जो ओपन <tagname> होता है उसे कही ना कही क्लोज </tagname> भी करना पड़ता है.

ऊपर के उदाहरण में हमने <head> टैग को ओपन करके उसके अंदर <style>…आपका CSS कोड..</style> फिर उसे क्लोज हेड टैग </head> से क्लोज कर दिया है.

हमेशा ध्यान रहे <style>…आपका CSS कोड..</style>  को head के अंदर ही आपको add करना होगा यदि आप पेज को डिज़ाइन करना चाहते है.

अब body सेक्शन में हमने कंटेंट यानी जानकारी डालनी होती है. तो वहापर हमने एक heading tag <h1> बनाकर उसके अंदर My First CSS Example लिखके उसे भी क्लोज कर दिया और वैसे ही पैराग्राफ के लिए <p> का इस्तेमाल किया है। ऐसे 100 से ऊपर html tags होते है जिन्हे आप यूज कर सकते है.

html tags referencew3schools

अब बारी आती है उन <tags> के अंदर के जानकारी जैसे, My First CSS Example को डिज़ाइन करने की तो उसके लिए हम 3 तरीको को यूज कर सकते है.

Types of CSS

जैसा की मैंने आपको बताया ऊपर के example में हमने internal CSS का इस्तेमाल किया है और ऐसही २ और तरीके भी है.

  1. Internal Cascading Style Sheet
  2. Inline Cascading Style Sheet
  3. External Cascading Style Sheet

1. Internal Cascading Style Sheet

Internal में हमें जैसा की मैंने ऊपर के उदाहरण को समझाते वक्त बताया था की, html के पेज के अंदर की <style> टैग में कोड लिखकर tags को एक्सेस करना होता है.

samp.html

<head>
<style>
body {
background-color: #333;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
color: yellow;
}
</style>
</head>

<body>– body मतलब हमारा वेबपेज होता है जिसपर यूजर को जानकारी दिखाई देती है. आसान भाषा में कहे तो इसके अंदर जो भी जानकारी डाली जाएगी वो पेज पर दिखेगी।

इस body को हमने <style> के अंदर लिखके { curley braces से ओपन और क्लोज किया }. हमेशा ध्यान रहे किसी भी tag को access करके उसे design करने के लिए ओपन और क्लोज कर्ली ब्रेसेस के अंदर ही कोड लिखना होता है.

तो उन कर्ली ब्रेसेस के अंदर हमे पेज के backgound का कलर चेंज करना है. क्यों की डिफ़ॉल्ट कलर हमेशा white होता है. इसके लिए आपको कौनसे कलर के लिए कौनसा Hex कोड होता है वोह पता होना चाहिए जैसे white कलर के लिए #fff और black के लिए #000.

यहां पर हमने ओपन कर्ली ब्रेसेस { के अंदर #333 मतलब की थोड़ा light dark color का इस्तेमाल किया है.

background-color: #333;

और फिर उसेक्लोज कर्ली ब्रेसेस से क्लोज कर दिया। अब कोड तभी वर्क करेगा जब आप उसके आगे semicolon; को डालोगे। क्यों की यदि हमे बॉडी में फॉन्ट कलर डालना हो या font family को choose करना होगा तो उसके लिए उसे हमेशा close ही करना पड़ता है तभी कोड run करने के बाद वर्क हो पाता है.

<p>– यहां पर भी हमने पैराग्राफ की डिफ़ॉल्ट text को थोड़ा modify किया है.

font-family: verdana; (added new font)

font-size: 20px; (change text size)

color: yellow; (text को yellow रंग दिया)

<h1>– same प्रोसेस हमने इस heading tag के लिए भी किये है. समझने के लिए आप कोड को रन करके जरूर try करे.

2. Inline Cascading Style Sheet

Inline CSS में हमे अलग <head> के अंदर अलग <style> बनाने की जरूरत नहीं होती हम HTML <tagname> के अंदर ही style को डिफाइन करके डिज़ाइन कर सकते है.

samp.html

<!DOCTYPE html>
<html>
<head>

<title> This is your web page title</title>

</head>

<body style="background-color:#333">

<h1 style="color: #fff; text-align:center">My First CSS Example</h1>
<p style="color: yellow; font-family:vedarna">This is a paragraph.</p>

</body>
</html>

run this code>>

इस तरह से करना आसान होता है लेकिन इसका हर एक टैग पर लोड बढ़ जाता है और इससे पेज load होने में भी समय लग जाता है.

Inline CSS करने के लिए tag के अंदर ही style=”your-css-code” को डालके CSS का कोड कोड लिखना होता है (follow above screensot). इसलिए developers हमेशा Internal and External CSS को ही recommend करते है.

3. External Cascading Style Sheet

यह सबसे पॉपुलर और सभी websites द्वारा इस्तेमाल किये जाने वाला CSS का type है. इसका यूज करना भी काफी ज्यादा आसान होता है, क्यों की इस तरह के external code का हमारे website पे किसी भी तरह का load नहीं आता और ना ही पेज की साइज बढ़ती है.

इसके लिए हमने अलग से .css नाम के फाइल बनानी होती है और उसे सिर्फ HTML पेज से access करना होता है. निचे दिया उदाहरण देखने के बाद आप इसे अच्छेसे समज जाओगे।

samp.html

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

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

</body>
</html>

mystyle.css

body {
background-color: #lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Run this code>>

ऊपर के उदाहरण में हमने mystyle.css के अंदर CSS के code को इन्सर्ट किया है और उसे HTML वेबपेज से path डालके access किया है.

<link rel="stylesheet" type="text/css" href="mystyle.css">

code को access करने के लिए ऊपर का external file का tag <head> tag के अंदर डालके href=”your-file-path”, href के अंदर उस फाइल का पाथ या destination address को ऐड करना होता है. मैंने एक ही फोल्डर में samp.html and mystyle.css फाइल्स को बनाया है इसलिए हम डायरेक्टली mystyle.css लिखकर उसे एक्सेस कर सकते है, लेकिन यदि फाइल किसी और फोल्डर में है तो आपको उस फोल्डर का पाथ href के अंदर ऐड करना होगा।

reference tutorialw3schools

इस तरह से हमने तीनो css के types को examples के साथ समझ लिया है, लेकिन फिर भी यदि आपको किसी भी तरह दिक्कत आती है या मैं कुछ चीजे इसमें add नहीं की है तो आप मुझे कमेंट सेक्शन में जरूर बताइये जिससे मैं इसका सही solution आपको बता सकू।

CSS Code रन कैसे करे

किसी भी वेब language कोड को रन करने का सबसे आसान तरीका है Notepad. काफी सारे developers professional टूल्स का इस्तेमाल वेबसाइट बनाने के लिए करते है, लेकिन इस आर्टिकल में मैं आपको आसान तरीका बताने वाला हूँ जिससे आपको शुरुवात में ही कोई confusion ना रहे।

Step 1: यदि आप windows operating system पर काम कर रहे है तो सबसे computer पर Notepad सर्च करके उसे ओपन कर ले.

Step 2: उसके बाद कही भी एक फोल्डर बना ले जिससे आपका प्रोजेक्ट एक ही जगह पर सेव रहे और आप Internal, External दोनों का इस्तेमाल आसानी से कर सको.

Step 3: Notepad ओपन करने बाद ऊपर दिए किसी भी कोड को कॉपी करके notepad में करे.

Step 4: कोड पेस्ट करने के बाद ऊपर लेफ्ट कॉर्नर पर लिखे File menu में जाकर उसे आपके folder में index.html नाम डालकर सेव करे. आप दूसरा नाम भी दे सकते है लेकिन index.html किसी वेब language में core फाइल होती है.

Step 5: कोड को रन करने के लिए आपको उस save हुयी फाइल पर double क्लिक करना होगा जिससे वोह आपके डिफ़ॉल्ट ब्राउज़र पर ओपन होगी।

Step 6: कोड में एडिट करने के लिए index.html पर राइट क्लिक करके edit with notepad पर क्लिक करे जिससे आप design को आसानी से चेंज कर सकोगे।

Note: External Stylesheet का इस्तेमाल करते वक्त आपको एक अलग file बनाकर उसे .css नाम से उसी लोकेशन पर save करना होगा जहा आपने index.html फाइल को सेव करके रखा है. (follow above steps)

Advantages of CSS 

पीछले कुछ सालो से CSS वेब लैंग्वेज में काफी सारे बदलाव हुए है और अब हम इसका जो version यूज कर रहे है वोह है CSS3 जो की कुछ updates के बाद से मार्केट में बहोत पॉपुलर हुआ है. इसलिए हर एक वेबसाइट को डिज़ाइन करने के लिए CSS का ही यूज हो रहा है. और अगर हम इसके फायदों के बारे में बात करे तो इसके कही सारे फायदे है जिसकी वजह से ही यह लैंग्वेज सबसे ज्यादा यूज की जाती है.

1. Page Load Time  

इसका यूज करने से हमारे वेबपेज में किसी भी तरह की स्पीड की दिक्कत नहीं आती. क्यों की मैंने आपको ऊपर बताया की इसके लिए डेवेलपर्स external stylesheet का उपयोग करते है और फिर उसे HTML पेज में एक्सेस करते है. इसके लिए आप किसी वेब पेज पर राइट क्लिक करके view source पर क्लिक करके भी css को चेक कर सकते है.

2. CSS Compressor 

इस language को ऐसा बनाया गया है की आप किसी भी external वेबसाइट या प्लगइन से इसके पेज साइज को minify या कंप्रेस कर सकते है. CSS compressors blank spaces को हटा देता है, indentations को ठीक करता है और पेज की performance को boost भी करता है.

3. Time की बचत होती है

आपको सिर्फ एक बार कोड को लिखना होता है और फिर आप उसे किसी भी HTML पेज से एक्सेस कर सकते है. ऐसा करने से हमारे मेहनत और टाइम दोनों की बचत हो जाती है.

4. Maintain करने में आसान 

कोड चेंज करने भी आसान है क्यों की उस external css में चेंज करोगे तो उसका इफ़ेक्ट आपको सभी पेजेस पर देखने को मिलेगा जिससे हमे कुछ अलग टोटके आजमाने की जरूरत नहीं रहती।

5. Platform Independence

बाकी सभी languages की तरह CSS भी globally accepted प्लेटफॉर्म इंडिपेंडेंट languange है. मतलब की इस वेब पेज के कोड को आप windows, linux, mac या किसी भी platform पर एक क्लिक में रन कर सकते है. बस इसके लिए आपको जरूरत होगी एक ब्राउज़र की.

CSS क्या है, कैसे यूज करते है और इसके examples को भी मैंने इस tutorial में कवर किया जिससे आपको कही और जानेकी जरूरत नहीं रहेगी।

अगर आपको यह आर्टिकल अच्छा लगा हो तो इसे अपने दोस्तों के साथ जरूर शेयर करे और यदि आप सोशल मीडिया से जुड़े हुए है तो वहा पर भी लोगो को इसके बारे में बताइये जिससे सभी हिंदी में CSS को सिख सके.

Previous articleHow to Delete blogger blog permanently in Hindi
Next articleGoogle People Card क्या हैं? गूगल पर प्रोफाइल कैसे बनाये
Rushikesh
मुझे ब्लॉगिंग करना अच्छा लगता हैं और इस ब्लॉग को मैंने खास ऐसे लोगो के लिए बनाया हैं जिनसे वो अपना करियर और पैसा दोना कमा सकते हैं.

LEAVE A REPLY

Please enter your comment!
Please enter your name here