Connect with us

tech help

▷Introduction of CSS in हिंदी-Complete Info ( 7 Steps )

Introduction Of CSS in Hindi- introduction in hindi- css in hindi- css tutorial in hindi- css tutorial for beginners in hindi- css basics- CSS kya hota hai

दोस्तों जैसा की आप टाइटल को पढ़ कर ही समझ गए होंगे की आज हम बात करने वाले है। CSS in Hindi की आखिर ये क्या है। कैसे CSS काम करती है। और क्यों इसका उपयोग किया जाता है। तो आपको पूरी जानकरी मिल जाएगी आज तो चलिए जानते है।

CSS info steps

CSS क्या होता है।
CSS का उपयोग कैसे किया जाता है।
CSS को कितने प्रकार से लिखा जा सकता है।
What is CSS Benefit ?
History of CSS in Hindi
How to Learn CSS in Hindi-CSS कैसे सीखें ?
CSS Language को सीखने के कुछ प्रमुख लाभ ?

CSS क्या होता है।

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

अगर आप ये भी नहीं जानते की html क्या है। और इसका उपयोग कर के कैसे बहुत आसानी से वेबसाइट का निर्माण किया जाता है। तो आप यहाँ html in hindi पर जा सकते है ,और जान सकते है।

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

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

CSS का उपयोग कैसे किया जाता है।

चलिए हम आपको बताते है। की इसका उपयोग html डॉक्यूमेंट के साथ कैसे किया जाता है। सबसे पहले एक html कॉड किखा जाता है। किसी भी webpage या वेबसाइट का निर्माण करते समय वह कॉड कुछ इस प्रकार लिखा जाता है।

try this code

<!DOCTYPE html>
<html>
<head>
    <title>CSS Introduction for bingnig</title>
</head>
<body>
    <h1>this is heading or css in hindi</h1>
    <h2>What is HTML lenguage</h2>
    <p>Hypertext Markup Language is the standard markup language for creating web pages and web applications. With
        Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</p>
    <h2>What is CSS</h2>
    <p>css is used to make html document beautiful and attractive. The full name of css is cascading style sheet.
    </p>
    <h2>What is website </h2>
    <p>A website is a group of many webpages. This is called a website. Just like a book has too many pages. Similarly,
        the website is also like a book.</p>
</body>
</html>

अगर हम इस वेबपेज के कोड को लैपटॉप या मोबाईल स्क्रीन में देखते है। तो यह कुछ इस प्रकार दिखाई देगा। आप देख सकते है। की इसमें हमें केवल टेक्स्ट ही दिखाई दे रहे है। क्योंकि हमने इसमें कोई CSS का उपयोग नहीं किया है।
Introduction Of CSS in Hindi- introduction in hindi- css in hindi- css tutorial in hindi- css tutorial for beginners in hindi- css basics- CSS kya hota hai
चलिए अब हम इसमें CSS का उपयोग करते है। और देखते है। की हमे क्या देखने को मिलता है। CSS उपयोग के बाद कुछ इस प्रकार हमें यह देखने को मिलता है।
Introduction Of CSS in Hindi- introduction in hindi- css in hindi- css tutorial in hindi- css tutorial for beginners in hindi- css basics- CSS kya hota hai
तो आप देख सकते है। की हमने जैसे ही CSS का उपयोग किया तो हमारा webpage कुछ इस प्रकार दिखाई देने लगा है। इस प्रकार html वेबसाइट को स्टाइल प्रदान करने के लिए CSS का उपयोग किया जाता है।

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

हम आपको जानकारी देना चाहेंगे की CSS यानिकि कास्केडिंग स्टाइल शीट को हम तीन प्रकार के लिख सकते है। (1)Inline (2)Internal (3) External

  • Inline CSS

Inline CSS इसका उपयोग आप html डॉक्यूमेंट के अंदर ही कर सकते है। जैसे की आप कोई एक पेराग्राफ लिख रहे है। तो आपको ब्रौज़र डिफाइन करना होता है। यह एक पेराग्राफ है। इसके लिए आप कुछ<p>टेक्स्ट </p> इस प्रकार p टैग का उपयोग करते है।

तो अगर आप चाहते है। की किसी पेराग्राफ को एक निश्चित कलर दिया जाये तो आप Inline CSS का उपयोग कर सकते है। इसके लिए आपको कुछ इस प्रकार लिखना होगा। <p style= “color:red “>टेक्स्ट </p> इस प्रकार लिखने से जो भी टेक्स्ट इस पेराग्राफ टैग के मध्य होगा उसका कलर रेड यानिकि लाल हो जायेगा। जैसा की आप इस इमेज में देख सकते है।

Introduction Of CSS in Hindi- introduction in hindi- css in hindi- css tutorial in hindi- css tutorial for beginners in hindi- css basics- CSS kya hota hai

जैसा की हमने कलर के आगे रेड लिखा है। तो ये लाल रंग में परिवर्तित हो जायेगा। ऐसी प्रकार अगर आप कोई अन्य कलर नाम या हेक्सकोड का उपयोग करते है। तो वह टेक्स्ट उसी कलर में परिवर्तित हो जायेगा। जो कलर नाम या हेक्सकोडे आप डालते है।
  • External CSS

External CSS का उपयोग हम उस स्थिति में करते है। जब हमारी वेबसाइट के लिए हमें एक बड़ी CSS फाइल का यूज़ करना पड़ता है। ताकि हमारी html फाइल अधिक बड़ी न हो। तब हम एक नयी फाइल का निर्माण करते है।

style.css के नाम से और उस फाइल को लिंक टैग के माध्यम से हेड टैग में जोड़ते है। जैसा की आप देख सकते है। की लिंक टैग की मदद से कैसे CSS फाइल को html फाइल के साथ जोड़ा जाता है।

try this code

<!DOCTYPE html>

<html>

<head>

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

<title> External CSS METHOD</title>

</head>

<body>

<h2> HEADING  </h2> 

<p> Paragraph </p>

</body>

</html>

href के आगे आपको उस फोल्डर नाम .CSS के साथ जोड़ना है। जिसमे आपकी CSS फ़ाइल रखी हुई है।

  • Internal CSS

Internal CSS यह भी एक आसान तरीका है। CSSको लिखने के लिए। जैसा की हमने इनलाइन CSS में देखा की हम किस प्रकार html टैग के साथ CSS को जोड़ सकते है। उसी प्रकार यह भी html doc फाइल में CSS को जोड़ता है। इसके लिए भी हमे कोई अन्य फाइल बनाने की आवश्कता नहीं रहती है। तो चलिए जानते है।

की हम किस प्रकार Internal CSS जोड़ सकते है। हम आपको जानकरी देते है। की इसे जोड़ने के लिए हमें किसी एलिमेंट id में कोई बदलाव करने की आवश्कता नहीं है। हमे html doc फाइल में head टैग में जाना होता है। और कुछ इस प्रकार CSS कोड लिखना होगा।

try this code

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: blue;
     }
h1{ color: white;}
p{ color: black;}
</style>
</head>
<body>
<h1>this is main heading </h1>
<p>this is sort peragraf</p>
</body>
</html>

कोड लिखने से पहले आपको कुछ <style></style>इस प्रकार टैग लगाकर ब्रौज़र को बताना होता है। की इस टैग के मध्य लिखा जाने वाला कोड एक css कोड है। और जिस प्रकार आप निर्देश देंगे। उसी प्रकार ब्रौज़र उस कोड को लागु करता है। जैसा की हमने बॉडी, h1, व p का निर्देश दिया है। तो बॉडी, h1, व p का कलर चेंज हो जायेगा।जैसा की आप देख सकते है। की हमने html में head टैग के मध्य कुछ CSS का उपयोग किया है। चलिए थोड़ा विस्तार से जानते है। सबसे पहले हमने head टैग खोजा जो इस प्रकार <head></head>लिखा होता है। फिर हमने इसमें हमने वेबपेज की बॉडी, h1, व p यानिकि पेराग्राफ का कलर चेंज करने के लिए कॉड लिखा है।

जिसमे बॉडी का कलर ब्लू हो जायेगा। h1 यानिकि मुख्य हेडिंग का कलर सफेद और p यानिकि पेराग्राफ का कलर काला हो जायेगा। इसी प्रकार सबसे पहले आपको उस कोड का टैग लिखना होता है। जिस पर आप कोई भी CSS लागु करना चाहते है। जैसे body, h1, p हमारे टैग है। उसके बाद आपको { }इस प्रकार से सेमीकॉलन लगाना होता है। और फिर इस सेमीकॉलन के मध्य आप CSS कोड लिख सकते है। और लिखा गया कोड काम करने लगेगा।जैसा की आप इस इमेज में देख सकते है।

Introduction Of CSS in Hindi- introduction in hindi- css in hindi- css tutorial in hindi- css tutorial for beginners in hindi- css basics- CSS kya hota hai

What is CSS Benefit ?

किसी वेबपेज या वेबसाइट को बनाने के लिए CSS का एक बहुत ही बड़ा योगदान होता है। जो कुछ इस प्रकार है।

  • time save

CSS इस्तेमाल करने का सबसे मह्त्वपूर्ण बेनिफिट हमे यह मिलता हैं। की हमे एक काम को बार-बार करने से छुटकारा मिल जाता हैं। मतलब हम एक CSS कॉड से एक ही id या एलिमेंट को कण्ट्रोल कर सकते है। इसके लिए अलग अलग कोड उपयोग करने आवश्कता नहीं रहती है। .

  • website speed

HTMLमें बहुत अधिक एलिमेंट होते है। और अगर हम उन सभी को अलग अलग स्टाइल देते है। तो हमें बहुत ही बड़ा कोड लिखना पड़ता है। जिसके कारण html फाइल का आकर बड़ा हो जाता है।

और आकर अधिक बड़ा हो जाये तो वेबसाइट की स्पीड भी घट जाती है। लेकिन अगर हम External CSS का उपयोग करते है। तो css का उपयोग भी हो जाता है। html फाइल का आकर भी नहीं बढ़ता है। जिसके कारण website की स्पीड भी अछि रहती है।

  • easy to maintain

External CSS का उपयोग करने से एक फायदा यह भी रहता है। हम वेबसाइट को आसानी से मेनेट कर पाते है। क्योंकि External CSS फ़ाइल अलग स्थान में होती है। और हमें वेबसाइट के html कॉड को नहीं खोलना पड़ता है।

  • Provide Responsive Design

CSS हमारी वेबसाइट रेस्पॉन्सिव भी करता है। ताकि हमारी वेबसाइट laptop, pc, कम्प्यूटर, मोबाईल, टैब आदि। में एक सही और पुरे आकर में दिखाई दे। क्योंकि रेस्पॉन्सिव होना बहुत ही आवश्क होता है।

  • Platform independent

प्लेटफॉर्म इंडिपेंडेंट यानिकि हम इसका उपयोग किसी भी प्लेटफॉर्म पर कर सकते है। क्योंकि यह सभी प्रकार के प्लेटफॉर्म को स्पॉट करता है।

  • Animations and Transitions

जिस प्रकार हम जानते ही हैं कि Animinations और Transitions वेबपेज और वेबसाइट के स्ट्रक्चर को सुंदर व् आकर्षक बनता हैं। तो CSS के द्वारा हम इन और अधिक आकर्षक और सुन्दर बना सकते हैं।

  • Superior styles to HTML

CSS और HTML की तुलना करे तो CSS में बहुत ही अधिक विशेषताएँ हैं। जिसकी मदद से हम HTML पृष्ठ को अधिक बेहतर रूप दे सकते हैं। केवल html की मदद से यह सम्भव नहीं है।

  • Global web standards

अब HTML attributes की स्थान पर CSS का उपयोग करने के लिए प्रेरित किया जा रहा है। तो यह सभी HTML पृष्ठों में सीएसएस का उपयोग शुरू करने के लिए एक बहुत अच्छा विचार साबित हो सकता है। जिसके कारण भविष्य के वेब ब्राउज़रों को और अधिक अनुकूल बनाया जा सकता है। जो की एक अछि बात साबित हो सकती है।

  • Offline Browsing

CSS एक offline catche की मदद से वेब एप्लिकेशन को स्थानीय रूप से संग्रहीत कर सकता है। इसका कारण हम ऑफ़लाइन वेबसाइटों को भी उपयोग कर सकते है। cache की मदद से किसी भी वेबसाइट वेबसाइट को तेजी से लोड करने में मदद प्राप्त होती है। जिसके कारण वेबसाइट के बेहतर प्रदर्शित किया जा सकता है।

  • Effective Performance

CSS का उपयोग करके जब भी कोई वेबसाइट का निर्माण किया जाता है। तो वो वेबसाइट बहुत ही हल्की होती है। जिसके कारण बहुत ही जल्दी खुल जाती जाती है। और CSS के उपयोग से वेबसाइट को अच्छा इंटरफेस दिया जा सकता है। ताकि वेबसाइट में आने वाले व्यक्ति को कोई परेशानी न रहे वेबसाइट को समझने में और इन्फोर्मेसन आसानी से प्राप्त कर पाए।

History of CSS in Hindi

CSS को लिखने वाले पहले व्यक्ति का ना Hakon Wium Lie था। जो की टीम बेर्नेर्स ली के साथ CERN नामक organization में कार्य करते थे। जो की European Research Organization था । Hakon Wium Lie ने सबसे पहले 1994 में CSS Rules को बनाया था। इसके बाद css की बागडोर World Wide Web Consortium यानिकि W3C के पास आ गयी और W3C ने CSS Level 1 को दिसबंर 1996 में प्रकाशित किया गया था। यह CSS का पहला Version था।

उसके बाद कुल तीन अपडेट आये जो कुछ इस प्रकार थे।
१. CSS Level 2
२. CSS Level 2.1
३ . CSS Level 3

CSS3 इसका सबसे लास्ट और नवीनतम अपडेट है।

How to Learn CSS in Hindi-CSS कैसे सीखें ?

अगर आप CSS सीखना चाहते है। तो हम आपको बता दे की आपको html से शुरुआत करनी होगी। क्योंकि CSS का उपयोग html में ही किया जाता है। जब आप html को सीखेंगे तो CSS और javasript का नॉलेज भी आपको हो जायेगा। क्योकि CSSऔर html java का की पार्ट है। अगर आप बेसिक html के बारे में भी नहीं जानते है। तो आप हमारी इस पोस्ट html in hindi को पढ़ सकते है। आपको html की सारी बेसिक जानकारी हिंदी भाषा में मिल जाएगी। ताकि आप आसानी से html सीख पाए। इस पोस्ट में आपको html के मुख्य टॉपिक जानने को मिल जायेंगे। जैसे –

html क्या है और पूरा नाम क्या है।
HTML को Markup Language क्यों कहा जाता है।
html भाषा की कोनसी पीढ़ी चल रही है।
html हिस्ट्री क्या है।
Features Of HTML In Hindi
html कोडिंग काम कैसे करता है।
html कोडिंग करने के लिए क्या क्या आवश्कता की चीजे।
html को लिखने का शुरआती रूल क्या है।
html टैग क्या होते है।
html में अधिक उपयोगी टैग क्या है।

अगर आप इन के बारे में जान जाते है। तो आपके लिए html सीखना बहुत आसान हो जायेंगे।
इसके बाद आप html को सिखने के लिए W3Schools.com पर जा सकते है। या यूट्यूब से भी सीख सकते है।

CSS Language को सीखने के कुछ प्रमुख लाभ ?

  • Create Stunning Web site

अगर आप CSS को सीखते है। तो इंटरनेट पर कुछ वेबसाइट है। जैसे FREELANCER , UPWORK और भी अन्य वहाँ लोग अपनी वेबसाइट या वेबपेज को CSS से स्टाइल देने वाले लोगोँ को खोजते है। ताकि अपनी वेबसाइट को सुंदर बना पाए। और उस काम के अच्छे खासे पैसे भी देते है। तो आप अपना इनकम का सोर्स भी बना सकते है।

  • Become a web designer

आप HTML OR CSS को सीख कर एक बेहतरीन सॉफ्टवेयर इंजीनियर बन सकते हो और अपना करियर professional web designer में बना सकते हो इसलिए आपको HTML और CSS designing की skill जरूर नहीं चाहिए।

  • Control web

HTML और CSS एक बहुत ही आसानी भाषा है। अगर आप इन को सीख लेते है। तो आपका काफी हद तक वेबसाइट के सभी फीचर पर आपका कण्ट्रोल आ जाता है। जो की बहुत ही समझ की बात होती है।

  • Learn other languages

एक बार जब आप HTML के बारे में बारीकी से समझ लेते हैं तो आपके लिए अन्य Programming Language जैसे की javascript, php, paythen, bootstep या अन्य फ्रेमवर्क को समझना भी बहुत हो आसान हो जाता है।

  • freelencer work

अगरआप केवल html table बनाना भी सीख जाते है। तो fiver, frilencer, या upwork जैसी वेबसाइट से पैसा कमा सकते है। हम आपको बता दे। की टेबल एक webdesign का ही पार्ट है। और इसे आप आसानी से 2 या 4 दिन में सीख सकते है। अगर आप teble के बारे में सीखना चाहते है।

तो आप यहाँ जा सकते है। table bnana sikhe हम आपको बताते है। की क्या माजरा होता है। table का। table में कुछ डेटिले को लिखना होता है। थोड़ा स्टाइल दे कर। fiver जैसी वेबसाइट में ऐसे काम बहुत सारे लोग दुसरो को पैसों के बदले करने के लिए देते है। ताकि वे अपना समय बचा सके।

Conclusion

दोस्तों आज हमने आपको CSS के बारे में जानकारी प्रदान करने की कोशिश की है। अगर आपका कोई सवाल या सुझाव हो तो कमेंट बॉक्स में पूछ सकते है। धन्यवाद।

learn more

▷What Is Web Page In Hindi-Complete Information

▷Blogger Me Whatsapp Share Button Kaise Lagaye

learn html and css in hindi about video

Click to comment

Leave a Reply

tranding