CSS Tutorial in Hindi (Full CSS Course in Hindi 2024 PDF)

FREE CSS Tutorial in Hindi: CSS प्रॉपर्टीज, सिंटैक्स, बैकग्राउंड इमेज, मार्जिन, टेक्स्ट फॉर्मेटिंग, बॉर्डर्स, रंग, सिलेक्टर्स, एक्सटर्नल CSS, पैडिंग और CSS बॉक्स मॉडल के विस्तृत व्याख्यान और उदाहरण शामिल हैं।

अगर आपने HTML सीख लिया है और अब आपको HTML Document डिजाइन करना है, इसलिए आप CSS सीखना चाहते हैं तो आप सही जगह पर हैं।

जैसा कि हमने एक Complete HTML Tutorial प्रदान किया है, वैसे ही यह CSS Course बिना किसी लागत के प्रदान किया गया है। जिसे कोई भी आसानी से CSS सीख सकता है।

अगर आप 2024 में सीएसएस सीखना चाहते हैं, तो यह ट्यूटोरियल लेख आपके लिए है। यह Full CSS Course in Hindi खास आपके लिए बनाया गया है। आप CSS Tutorial in Hindi PDF फॉर्मेट में भी डाउनलोड कर सकते हैं।

Complete CSS Tutorial in Hindi

यदि आप एक वेब पेज डिजाइन करना चाहते हैं, तो आपको सीएसएस (कैस्केडिंग स्टाइल शीट) भाषा की आवश्यकता है। इसके बिना, आप एक वेब पेज या वेबसाइट डिजाइन नहीं कर सकते। इसलिए यदि आप एक पेशेवर वेब डेवलपर बनना चाहते हैं तो आपको पहले HTML फिर CSS सीखना चाहिए।

अगर आपको लगता है कि CSS बहुत कठिन भाषा है, तो मैं आपको बता दूं कि यह बहुत ही सरल और आसान भाषा है, जिसे कोई भी आसानी से सीख सकता है।

आपको बस एक या दो सप्ताह सीएसएस सिंटैक्स सीखने और अभ्यास करने के लिए अपना समय देने की आवश्यकता है।

मेरा विश्वास करो, आप हमारे सीएसएस ट्यूटोरियल के साथ बहुत तेजी से सीएसएस सीख सकते हैं। जो आपको इस लेख में पता चलेगा। इस CSS Tutorial in Hindi में, आप Complete CSS course online in Hindi घर में बैठे सीख सकते हैं।

यदि आप वेब डिजाइनिंग क्षेत्र में नए हैं तो चलिए पहले थोड़ा CSS का परिचय जानते है।

CSS का परिचय हिंदी में

सीएसएस (CSS) का पूरा नाम “Cascading Style Sheets” है। इसका उपयोग markup भाषा (HTML, XML) में लिखे गए Document को वेब ब्राउज़र में कैसे प्रदर्शन करना है उसे वर्णन करती है।

जैसे टेक्स्ट फ़ॉन्ट क्या होना चाहिए, टेक्स्ट का रंग, पृष्ठ का लेआउट, और अलग-अलग उपकरणों में वेब पेज कैसे प्रदर्शित होगा, आदि। ये सब चीजें सीएसएस ही नियंत्रण करता है।

CSS तीन प्रकार के होते हैं, जैसे कि Inline, Internal और External CSS, इन तीनों का उपयोग करके, आप आसानी से किसी भी वेब पेज को डिजाइन कर सकते हैं।

2024 में CSS क्यों सीखें (Why learn CSS in 2024)?

सीएसएस सीखने के मुख्य कारण यहां दिए गए हैं:

• 2024 में CSS सीखना महत्वपूर्ण है क्योंकि यह वेब डिज़ाइन का मुख्य हिस्सा है।
• CSS से आप वेब पेज को आकर्षक और उपयोगकर्ता के अनुकूल बना सकते हैं।
• नई तकनीकों और फ्रेमवर्क्स के साथ, CSS की मांग बढ़ रही है, जिससे कैरियर के अवसर भी बढ़ते हैं।
• CSS सीखने से आप आधुनिक और इंटरएक्टिव वेबसाइट बना सकते हैं।

CSS ही वोह भासा है जो आपको डेवलपर्स के साथ बेहतर संवाद करने में सक्षम करेगा। तो आब सवाल आता है, सीएसएस कैसे सीखें?

CSS कैसे सीखे (How to learn CSS)?

सीएसएस सीखना बहुत आसान है, आप वेब पेज को संरचना करने के लिए उपयोग किए जाने वाले CSS selectors, declaration, ओर CSS properties ओर उनके उपयोग कैसे करना है? यह सब सीखना है, जो यहां आपको जानकारी मिल जाएगा की कहां से सिख सकते हैं।

Learn Free CSS Tutorial in Hindi Online [2024 Updated]

सीएसएस सीखना आसान है, आपको केबल नीचे दिए गए CSS lesson से सीखना शुरू करना है। और practically आपके Code editor में अभ्यास करते रहना है।

तो आप सीएसएस सीखने में देरी क्यों कर रहे हैं? अभी यहां दिए गए CSS सबक से सिखा शुरू करें:

Lesson 1: What is CSS in Hindi?

CSS (Cascading Style Sheets) एक स्टाइल शीट भाषा है जिसका उपयोग HTML दस्तावेजों को प्रस्तुत करने के लिए किया जाता है। CSS आपको वेब पेजों के रूप और अनुभव को नियंत्रित करने की अनुमति देता है, जिसमें लेआउट, रंग, फ़ॉन्ट्स, और अन्य दृश्य तत्व शामिल हैं। CSS का उपयोग करने के लाभों में शामिल हैं:

• स्टाइल को एक बार में कई पेजों पर लागू करना
• कोड को स्वच्छ और प्रबंधनीय बनाए रखना
• वेबसाइट के लोड समय को कम करना
• विभिन्न उपकरणों और स्क्रीन आकारों के लिए उत्तरदायी डिज़ाइन बनाना

CSS को अच्छी तरह सीखने के लिए, सबसे पहले आपको सीएसएस भाषा के बारे में पूरी जानकारी प्राप्त करनी चाहिए, जो आपको यहाँ मिलेगी: “CSS की पूरी जानकारी हिंदी में जानिए”।

Lesson 2: Learn CSS Syntax

CSS सिंटैक्स में एक सेलेक्टर और एक घोषणा ब्लॉक शामिल होता है। सेलेक्टर वह तत्व है जिसे आप स्टाइल करना चाहते हैं, और घोषणा ब्लॉक में एक या अधिक घोषणाएँ होती हैं, जिनमें संपत्ति और मूल्य शामिल होते हैं। उदाहरण:

cssCopy codeh1 {
    color: blue;
    font-size: 20px;
}

इस उदाहरण में, h1 सेलेक्टर है और { color: blue; font-size: 20px; } घोषणा ब्लॉक है।

Lesson 3: Learn CSS Types

CSS के तीन मुख्य प्रकार हैं:

1. Inline CSS: HTML तत्वों के भीतर स्टाइल लागू करना। उदाहरण:htmlCopy code<h1 style="color: blue;">Hello World</h1>
2. Internal CSS: HTML दस्तावेज़ के <head> सेक्शन में स्टाइल शीट शामिल करना। उदाहरण:htmlCopy code<style> h1 { color: blue; } </style>
3. External CSS: एक अलग CSS फ़ाइल का उपयोग करना और उसे HTML दस्तावेज़ से लिंक करना। उदाहरण:htmlCopy code<link rel="stylesheet" type="text/css" href="styles.css">

सीएसएस के तीन प्रकार है जिससे आप किसी भी वेब पेज को डिज़ाइन करने के लिए उपयोग कर सकते हैं।

इसके प्रकारों के बारे में विस्तार से समझने के लिए यह पढ़े: CSS के प्रकार (Types of CSS in Hindi)।

Lesson 4: Learn CSS Selectors

CSS सेलेक्टर्स का उपयोग HTML तत्वों का चयन करने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।

विभिन्न प्रकार के सेलेक्टर्स में शामिल हैं:

• Element Selector: उदाहरण: h1 { color: blue; }
• Class Selector: उदाहरण: .intro { color: blue; }
• ID Selector: उदाहरण: #header { color: blue; }
• Attribute Selector: उदाहरण: [type="text"] { color: blue; }
• Pseudo-class Selector: उदाहरण: a:hover { color: blue; }
• Pseudo-element Selector: उदाहरण: p::first-line { color: blue; }

जैसे कि अगर आपको <h1> टैग को स्टाइल करना है तो selector का उपयोग करके <h1> टैग का फोंट, रंग, साइज़ आदि परिवर्तन कर सकते हैं।

• Selectors की परिचय के लिए यह पढ़े: CSS Selectors क्या है और इसका उपयोग हिंदी में जानिए।

Lesson 5: External CSS in Hindi

External CSS फ़ाइल बनाने के लिए:

1. एक नई फ़ाइल बनाएं और उसका नाम styles.css रखें।
2. अपनी CSS घोषणाएँ उस फ़ाइल में लिखें। उदाहरण:cssCopy codebody { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
3. HTML दस्तावेज़ के <head> सेक्शन में CSS फ़ाइल को लिंक करें। उदाहरण:htmlCopy code<link rel="stylesheet" type="text/css" href="styles.css">

यह एक CSS के प्रकार है इसका उपयोग बाहर से HTML document को डिज़ाइन करने के लिए किया जाता है।

यानी कि इक्स्टर्नल सीएसएस एक अलग .css फ़ाइल extension में बनी होती है।

पूरी जानकारी के लिए ये पढ़े: External CSS क्या है और कैसे CSS file बनाए और HTML के साथ कैसे लिंक करें पूरी जानकारी हिंदी में।

Lesson 6: CSS Property in Hindi

CSS प्रॉपर्टीज़ का उपयोग HTML elements के विभिन्न पहलुओं को स्टाइल करने के लिए किया जाता है।

कुछ सामान्य प्रॉपर्टीज़ में शामिल हैं:

• color: टेक्स्ट का रंग सेट करता है।
• font-size: टेक्स्ट का आकार सेट करता है।
• background-color: पृष्ठभूमि का रंग सेट करता है।
• margin: तत्व के चारों ओर का बाहरी स्थान सेट करता है।
• padding: तत्व के अंदर का आंतरिक स्थान सेट करता है।

CSS property की पूरी जानकारी यहाँ से सीखें।

यदि आपने सीएसएस ट्यूटोरियल का Basic level पूरा कर लिया है.

तो आइए Advanced CSS Tutorial in Hindi का topics सीखना शुरू करें:

Advanced CSS Course in Hindi Lessons

इस विस्तृत कोर्स में, आप सीखेंगे CSS की Advanced तकनीकें, जिसमें बॉक्स मॉडल, मार्जिन, पैडिंग, बॉर्डर, रंग, बैकग्राउंड इमेज, और टेक्स्ट फॉर्मेटिंग जैसे महत्वपूर्ण विषय शामिल हैं, ताकि आप पेशेवर और उत्तरदायी वेबसाइटें बना सकें।

Lesson 1: CSS Box Model in Hindi

CSS बॉक्स मॉडल HTML तत्वों को एक बॉक्स के रूप में मानता है जिसमें चार हिस्से होते हैं:

1. Content: तत्व का वास्तविक कंटेंट।
2. Padding: कंटेंट के चारों ओर का आंतरिक स्थान।
3. Border: पैडिंग के चारों ओर की सीमा।
4. Margin: बॉर्डर के चारों ओर का बाहरी स्थान।

Lesson 2: CSS Margin in Hindi

Margin प्रॉपर्टी का उपयोग तत्व के चारों ओर का बाहरी स्थान सेट करने के लिए किया जाता है।

इसे विभिन्न दिशाओं में सेट किया जा सकता है:

• margin-top: शीर्ष मार्जिन सेट करता है।
• margin-right: दायां मार्जिन सेट करता है।
• margin-bottom: निचला मार्जिन सेट करता है।
• margin-left: बायां मार्जिन सेट करता है।

उदाहरण:

cssCopy codediv {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

• CSS में Margin property का उपयोग कैसे करें पूरी जानकारी जानें।

Lesson 3: CSS Padding in Hindi

CSS में Padding प्रॉपर्टी का उपयोग कंटेंट के चारों ओर का आंतरिक स्थान सेट करने के लिए किया जाता है। इसे विभिन्न दिशाओं में सेट किया जा सकता है:

• padding-top: शीर्ष पैडिंग सेट करता है।
• padding-right: दायां पैडिंग सेट करता है।
• padding-bottom: निचला पैडिंग सेट करता है।
• padding-left: बायां पैडिंग सेट करता है।

उदाहरण:

cssCopy codediv {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Lesson 4: CSS Borders in Hindi

CSS Border property का उपयोग तत्व के चारों ओर की सीमा सेट करने के लिए किया जाता है। इसे विभिन्न दिशाओं में सेट किया जा सकता है:

• border-width: बॉर्डर की चौड़ाई सेट करता है।
• border-style: बॉर्डर की शैली सेट करता है (जैसे, solid, dotted, dashed)।
• border-color: बॉर्डर का रंग सेट करता है।

उदाहरण:

cssCopy codediv {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

Lesson 5: CSS Colors in Hindi

CSS में रंग सेट करने के लिए विभिन्न तरीके हैं:

• Color Names: उदाहरण: color: red;
• Hex Codes: उदाहरण: color: #ff0000;
• RGB Values: उदाहरण: color: rgb(255, 0, 0);
• HSL Values: उदाहरण: color: hsl(0, 100%, 50%);

CSS colors की पूरी जानकारी समझें।

Lesson 6: CSS Background Image in Hindi

CSS Background Image प्रॉपर्टी का उपयोग तत्व के पृष्ठभूमि में छवि जोड़ने के लिए किया जाता है। उदाहरण:

cssCopy codebody {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Lesson 7: CSS Text in Hindi

CSS में टेक्स्ट को फॉर्मेट करने के लिए विभिन्न प्रॉपर्टीज़ का उपयोग किया जाता है:

• color: टेक्स्ट का रंग सेट करता है।
• font-size: टेक्स्ट का आकार सेट करता है।
• font-family: टेक्स्ट का फ़ॉन्ट सेट करता है।
• text-align: टेक्स्ट को संरेखित करता है (जैसे, left, right, center, justify)।
• text-decoration: टेक्स्ट की सजावट सेट करता है (जैसे, underline, overline, line-through)।

Lesson 8: HTML & CSS Comments in Hindi

HTML और CSS में टिप्पणियाँ (comments) जोड़ने के लिए उपयोग की जाती हैं:

• HTML Comments: <!-- This is a comment -->
• CSS Comments: /* This is a comment */

Lesson 9: CSS Notes in Hindi

इस प्रकार आप अपने CSS कोर्स के लिए नई और विस्तृत सामग्री जोड़ सकते हैं।

यदि आपको और सहायता की आवश्यकता है तो कृपया बताएं

अगर आप CSS सीखने में शुरुआत किए है, तो इस CSS tutorial in Hindi lesson को सबसे पहले सीखना अनिवार्य है।

नोट: Advance level में CSS सीखने के लिए अभी Telegram Channel अभी join करें।

FAQs about CSS Tutorial in Hindi

यहां CSS tutorial के बारे में कुछ प्रमुख अक्सर पूछे जाने वाले प्रश्न दिए गए हैं, इससे आपको सीएसएस के बारे में और अधिक समझने में मदद मिलेगी:

निष्कर्ष

यदि आप सीएसएस सीखने के बारे में भावुक और एक अच्छा वेब डेवलपर चाहते हैं,

तो इस CSS tutorial में, दिए गए इन सभी CSS सबक को एक-एक करके सीखने और अभ्यास की ज़रूरत है।

मेरा विश्वास करो, ये सभी CSS पाठ आपको एक वेब पेज डिजाइन करने में मदद करेंगे।

तो देर किस बात की इस CSS Tutorial in Hindi में आप Complete CSS course in Hindi online घर बैठे ही मुफ़्त में, सीखना शुरू करें और front end वेब विकास (web development) में मास्टर बने।

मुझे आशा है कि यह CSS ट्यूटोरियल आपके लिए उपयोगी शबित होगा।

इस CSS course को बेहतर बनाने के लिए त्रुटियों और संभावित तरीकों को सूचित करने के लिए बेझिझक मुझसे संपर्क करें। धन्यवाद!