CSS Notes in Hindi – सीएसएस नोट्स हिंदी में [PDF]

CSS Notes in Hindi: CSS एक स्टाइलशीट भाषा है जिसका उपयोग HTML में लिखे गए दस्तावेज़ (document) की प्रस्तुति का वर्णन करने के लिए किया जाता है। CSS वेब डिजाइन और विकास में एक महत्वपूर्ण भूमिका निभाता है, जिससे एक Responsive और Functional वेबसाइट बनाना आसान हो जाता है।

यह लेख “सीएसएस नोट्स हिंदी में,” सीएसएस और इसके विभिन्न घटकों को समझने के लिए एक व्यापक गाइड प्रदान करता है, जिसमें चयनकर्ता, इकाइयां, बॉक्स मॉडल, फ्लोट और क्लियर, और ग्रिड और फ्लेक्सबॉक्स आदि शामिल हैं।

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

सीएसएस नोट्स इन हिंदी (CSS Notes in Hindi)

सीएसएस एक स्टाइलिंग लैंग्वेज है जो डेवलपर्स को वेबसाइट के लुक और फील को नियंत्रित करने की अनुमति देती है। यह आपको अपनी साइट के लिए लेआउट, रंग, फ़ॉन्ट और अन्य डिज़ाइन तत्वों को निर्दिष्ट करने की अनुमति देता है।

CSS HTML एलिमेंट्स को स्टाइल असाइन करके काम करता है, जो बदले में यह निर्धारित करता है कि पेज पर एलिमेंट्स कैसे प्रदर्शित होते हैं।

सीएसएस की मूल बातें को समझें (CSS Basics)

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

CSS के बारे में अधिक जानने के लिए यहां हमारे व्यापक लेख: सीएसएस की पूरी जानकारी जानें।

सीएसएस के प्रकार को जानें (Types of CSS)

सीएसएस के 3 प्रकार होते हैं:

1. इनलाइन: यह सीधे HTML तत्व (element) पर लागू होता है।
2. आंतरिक (Internal): यह HTML दस्तावेज़ के head भाग में “style” attribute के साथ परिभाषित किया जाता है।
3. बाहरी (External): इस प्रकार के CSS HTML दस्तावेज़ के अलग फ़ाइल में परिभाषित होता है जो “link” tag से जुड़ी जाती है।

मूल रूप से, इनलाइन का उपयोग अनूठी शैलियों के लिए किया जाता है, विशिष्ट पृष्ठ के लिए आंतरिक, एकाधिक पृष्ठों के लिए बाहरी और सबसे अधिक लचीला होता है।

CSS के सभी प्रकार को अच्छी तरह से जैनने और उपयोग करने के लिए हमारे इस लेख: “CSS के प्रकार और इसका उपयोग करना सीखे” पढ़े।

Types of CSS in Hindi – सीएसएस के प्रकार हिंदी में

सीएसएस सिंटैक्स को समझें (CSS Syntax)

CSS के मूल सिंटैक्स में एक चयनकर्ता शामिल होता है, जिसके बाद घुंघराले ब्रेसिज़ {} का एक सेट होता है, जिसमें वे शैलियाँ होती हैं जिन्हें आप उस चयनकर्ता पर लागू करना चाहते हैं।

उदाहरण के लिए, यदि आप अपनी वेबसाइट पर सभी शीर्षकों को बोल्ड करना चाहते हैं, तो आप निम्न CSS कोड लिख सकते हैं:

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

• CSS Syntax की पूरी जानकारी यहाँ दिए गए है:

Syntax of CSS in Hindi – CSS का सिंटैक्स और उपयोग

सीएसएस टिप्पणियों का प्रयोग (Use CSS Comments)

CSS Comments का उपयोग आपके CSS कोड में नोट्स और स्पष्टीकरण जोड़ने के लिए किया जाता है। टिप्पणियाँ आपको और अन्य डेवलपर्स को आपकी शैलियों के उद्देश्य को समझने में मदद करती हैं और समय के साथ आपके कोड को बनाए रखना आसान बनाती हैं।

CSS में, टिप्पणियों को फ़ॉरवर्ड स्लैश और तारांकन वर्ण /* और */ का उपयोग करके परिभाषित किया जाता है।

उदाहरण के लिए, आप अपने CSS कोड में इस तरह एक टिप्पणी जोड़ सकते हैं:

/* This is a comment in CSS */
body {
   background-color: lightgray;
}

आइए अभी उन्नत सीएसएस नोट्स (Advanced CSS Notes in Hindi) के साथ CSS को सीखना शुरुआत करें, इससे सीएसएस को और गहराई से समझने में मदद मिलेगी –

Complete Advanced CSS Notes in Hindi

यहां सबसे महत्वपूर्ण और उन्नत (Advanced) सीएसएस नोट्स दिए गए हैं:

चयनकर्ता को समझें (CSS Selector)

CSS चयनकर्ता (selectors) आपको किसी वेब पेज पर विशिष्ट HTML तत्वों को लक्षित करने और उन पर शैलियाँ (styles) लागू करने की अनुमति देते हैं। चयनकर्ताओं का उपयोग करके, आप अपनी वेबसाइट के लेआउट, रंग और दिखावट को नियंत्रित कर सकते हैं। देखने में आकर्षक और उपयोगकर्ता के अनुकूल वेबसाइट बनाने के लिए यह आवश्यक है।

इसे अच्छी तरह से समझने और उपयोग करने के लिए हमारे इस लेख: CSS selector की पूरी जानकारी को पढ़े।

CSS Selectors in Hindi (Selector क्या है इसके प्रकार)

CSS Units को समझें

सीएसएस इकाइयों (units) का उपयोग elements के आकार को निर्दिष्ट करने के लिए किया जाता है, जैसे कि इसकी चौड़ाई, ऊंचाई और फ़ॉन्ट आकार। CSS में कई प्रकार की इकाइयाँ हैं, जिनमें पिक्सेल (px), ems और प्रतिशत (%) शामिल हैं।

CSS units को समझना बहुत महत्वपूर्ण है, क्योंकि वेबसाइट के डिजाइन में स्थिरता और सटीकता सुनिश्चित करने, इसे बनाए रखने और अपडेट करने में आसान बनाने और क्रॉस-डिवाइस संगतता सुनिश्चित करने के लिए इकाइयां महत्वपूर्ण हैं।

CSS Property को समझें

सीएसएस property व्यक्तिगत विशेषताएं हैं जो वेब पेज के स्वरूप और स्वरूपण को परिभाषित करती हैं। कुछ सामान्य CSS गुणों में शामिल हैं:

• color: पाठ और अन्य तत्वों का रंग सेट करता है।
• font-size: पाठ का आकार सेट करता है।
• Background-color: किसी तत्व की पृष्ठभूमि का रंग सेट करता है।
• width: किसी तत्व की चौड़ाई सेट करता है।
• height: किसी तत्व की ऊँचाई निर्धारित करता है।

CSS में और भी कई properties हैं जिनका उपयोग वेब पेजों को स्टाइल और फॉर्मेट करने के लिए किया जा सकता है।

CSS Property in Hindi (CSS Properties का उपयोग)

CSS में रंगों (Colors) का उपयोग करना सीखें

सीएसएस रंग (color) महत्वपूर्ण है क्योंकि यह आपको अपनी वेबसाइट की रंग योजना को नियंत्रित करने, एक सुसंगत ब्रांड पहचान बनाने, अभिगम्यता बढ़ाने, मनोदशा या भावना व्यक्त करने और पठनीयता में सुधार करने की अनुमति देता है। यह दृश्य रुचि जोड़ता है और आपकी वेबसाइट को अधिक आकर्षक और सुलभ बनाता है।

• CSS color के बारे में अधिक जानें: CSS colors की पूरी जानकारी:

CSS Colors in Hindi – CSS रंगों का प्रयोग करें

CSS में Background इमेज जोड़ना सीखें

दृश्य रुचि जोड़ने और वेबसाइट के रूप को बढ़ाने के लिए CSS background images का उपयोग करना महत्वपूर्ण है। यह ठोस रंगों से परे अनुकूलन की अनुमति देता है, अद्वितीय तत्व जोड़ता है, और वांछित वातावरण बना सकता है। सीएसएस backgournd images का उचित उपयोग एक वेबसाइट के समग्र डिजाइन और उपयोगकर्ता अनुभव में सुधार कर सकता है।

CSS Background Image in Hindi – बैकग्राउंड इमेज कैसे जोड़ें

CSS में Border को समझें।

CSS में Border एक शैलीगत तत्व है जो एक HTML तत्व को रेखांकित करता है, दृश्य रुचि जोड़ता है और तत्व के आकार और स्थिति को परिभाषित करने में मदद करता है।

वेब पेज पर संरचना बनाने और तत्वों को अलग करने के लिए यह महत्वपूर्ण है, जिससे उपयोगकर्ताओं के लिए सामग्री के पदानुक्रम को समझना आसान हो जाता है।

CSS Borders in Hindi (CSS border properties)

CSS में Margin देना सीखें

CSS मार्जिन एक HTML तत्व के बाहर का स्थान है, जिसका उपयोग तत्वों और नियंत्रण रिक्ति के बीच स्थान बनाने के लिए किया जाता है।

यह दृश्य पदानुक्रम बनाने, पठनीयता में सुधार करने और तत्वों के चारों ओर सफेद स्थान बनाने के लिए महत्वपूर्ण है ताकि वे अलग दिखें और सौंदर्य की दृष्टि से आकर्षक दिखें।

सीएसएस मार्जिन की पूरी जानकारी यहाँ है:

CSS Margin in Hindi (Margin property)

CSS Padding को समझें

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

CSS Padding in Hindi (All Padding Properties)

CSS Text Formatting करना सीखें

सीएसएस text formatting फ़ॉन्ट आकार, फ़ॉन्ट शैली, रेखा ऊंचाई, रंग, और अधिक सहित HTML तत्व की पाठ्य content पर शैलीगत नियंत्रण को संदर्भित करता है। किसी वेब पृष्ठ पर पाठ्य सामग्री को पढ़ने योग्य, सुलभ, और दृष्टिगत रूप से आकर्षक बनाने, उपयोगकर्ता अनुभव में सुधार करने और साइट के समग्र स्वरूप और अनुभव के लिए यह महत्वपूर्ण है।

CSS Text in Hindi (Text formatting)

Box Model का उपयोग करना सीखें

सीएसएस बॉक्स मॉडल एक HTML तत्व की संरचना को संदर्भित करता है, जिसमें सामग्री, पैडिंग, बॉर्डर और मार्जिन शामिल हैं। वेब पेज पर तत्वों के आकार और स्थिति को निर्धारित करने के साथ-साथ दृश्य पदानुक्रम बनाने, रिक्ति को नियंत्रित करने और आकर्षक डिजाइन बनाने के लिए यह महत्वपूर्ण है।

वेब विकास के लिए CSS बॉक्स मॉडल को समझना आवश्यक है। यहाँ Box model की पूरी जानकारी दिए गए है:

CSS Box Model in Hindi (बॉक्स मॉडल को सीखें)

CSS Floats और Clears को समझें

किसी वेबसाइट पर तत्वों के लेआउट को नियंत्रित करने के लिए CSS floats और clears का उपयोग किया जाता है।

Floats तत्वों को अन्य तत्वों के बाएँ या दाएँ फ़्लोट करने की अनुमति देता है, जबकि clears तत्वों को फ़्लोट किए गए तत्वों के नीचे शुरू करने की अनुमति देता है।

CSS फ़्लोट्स और क्लियर का उदाहरण:

/* Float Example */
.left {
float: left;
}

.right {
float: right;
}

/* Clear Example */
.clear {
clear: both;
}

CSS Grid और Flexbox को समझें

सीएसएस ग्रिड और फ्लेक्सबॉक्स आधुनिक लेआउट सिस्टम हैं जो किसी वेबसाइट पर तत्वों के लेआउट को नियंत्रित करने के लिए शक्तिशाली और लचीले विकल्प प्रदान करते हैं।

Grid और Flexbox एक ग्रिड सिस्टम पर आधारित होते हैं, जिससे डेवलपर्स आसानी से जटिल और उत्तरदायी लेआउट बना सकते हैं।

सीएसएस ग्रिड और फ्लेक्सबॉक्स का उदाहरण:

/* CSS Grid Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

/* CSS Flexbox Example */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

CSS Frameworks को जानें

सीएसएस फ्रेमवर्क पूर्व-तैयार पुस्तकालय (libraries) हैं जो सीएसएस का उपयोग करके वेब पेजों की आसान, अधिक मानक-अनुपालन स्टाइलिंग की अनुमति देने के लिए हैं। कई अलग-अलग CSS फ्रेमवर्क उपलब्ध हैं, जिनमें शामिल हैं:

• बूटस्ट्रैप (Bootstrap)।
• Foundation।
• बुलमा (Bulma)।
• सिमेंटिक यूआई (Semantic UI)।

सीएसएस फ्रेमवर्क का उपयोग करने से आपका समय और प्रयास बच सकता है, उपरोक्त सूची में से कम से कम किसी एक CSS फ्रेमवर्क को सीखें।

CSS preprocessors को समझें

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

मूल रूप से, सीएसएस प्रीप्रोसेसर CSS कोड को लिखने और बनाए रखने में आसान बनाने पर ध्यान केंद्रित करते हैं।

कुछ लोकप्रिय CSS प्रीप्रोसेसरों में शामिल हैं:

• Sass
• Less
• Stylus

CSS Notes FAQs:

निष्कर्ष

देखने में आकर्षक और कार्यात्मक वेबसाइट बनाने के लिए CSS एक आवश्यक उपकरण है, और CSS में महारत हासिल करने से आपका वेब विकास कौशल अगले स्तर पर पहुंच जाएगा।

यह सीएसएस नोट (CSS Notes in Hindi), इसके सिंटैक्स और चयनकर्ताओं से लेकर इसके उन्नत विषयों जैसे बॉक्स मॉडल, फ्लोट और क्लियर, और ग्रिड और फ्लेक्सबॉक्स को समझने के लिए एक व्यापक गाइड प्रदान करता है।

अपने वेब विकास परियोजनाओं की सफलता सुनिश्चित करने के लिए नवीनतम सीएसएस प्रगति और सर्वोत्तम प्रथाओं के साथ अभ्यास करना और अद्यतित रहना याद रखें।

मुझे उम्मीद है कि हमारे CSS Notes in Hindi PDF (सीएसएस नोट्स हिंदी में) आपको सीएसएस के बारे में सब कुछ समझने में मदद करेंगे।