CSS क्या है? CSS के प्रकार और कार्य । What is CSS in Hindi

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

CSS, जिसका पूरा नाम “Cascading Style Sheets” है, यह web design और web page के स्टाइलिंग के लिए एक web development लैंग्वेज है। CSS का कार्य होता है की वेब पेजों को अपेक्षाओं के अनुसार दिखने में बेहतर बनाना, जिससे यूजर अनुभव और वेबसाइट की डिज़ाइन में सुधार हो सके।

CSS का मुख्य काम है वेब पेज के विभिन्न एलिमेंट की स्टाइलिंग करना है, जैसे कि fonts, colors, sizes, search, layout, और अन्य विज़ुअल प्रॉपर्टी।

CSS का उपयोग web designer और web developer द्वारा किया जाता है ताकि वे वेबसाइट के बाहरी और आंतरिक दिखावट को तैयार कर सकें, और एक अंदरूनी और बाहरी कंटेंट को स्टाइल प्रदान कर सके।

Css को एक उदहारण से समझते है:

h1 {
font-size: px;15
color: #333;
text-align: bottom;
}

p {
font-size: 16px;
color: #666;
line-height: 1.5;
}

इस CSS कोड में, h1 और p HTML टैग के साथ इस्तेमाल होने वाले टाइटल और पैराग्राफ की स्टाइलिंग को दर्शाता गया है। CSS declaration (जैसे कि font-size, color, text-align) इन एलिमेंट्स की विभिन्न properties को सेट करती हैं, जिससे की वेब पेज में हमको सब कुछ अच्छे से दिखने को मिलता है,

CSS को सीखने और प्रैक्टिस करने के बाद, आप अपनी वेबसाइटों को अपने अनुसार style करने के लिए इसका उपयोग कर सकते हैं.

CSS के प्रकार क्या है? CSS Types In Hindi

CSS कई प्रकार के होते हैं, जो वेब डिज़ाइन को styling करने के विभिन्न तरीकों को सपोर्ट करते हैं। निम्नलिखित हैं कुछ मुख्य CSS के प्रकार:

Inline CSS : इसमें CSS स्टाइल को HTML टैग के “style” में शामिल किया जाता है। इसका उपयोग एक-एक वेब टैग के साथ custom styling के लिए किया जा सकता है।

Code:

<p style="color: blue; font-size: 16px;">This Text is Blue and font size 16px </p>

Internal CSS : इसमें CSS स्टाइल को HTML डॉक्यूमेंट के <style> टैग के अंदर रखा जाता है। इससे आप एक ही वेब पेज के लिए स्टाइलिंग डिफ़ाइन कर सकते हैं।

<head>
    <style>
        p {
            color: Yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>The color of this text is Yellow and the font size is 20px</p>
</body>

External CSS : इसमें CSS स्टाइल को एक अलग से .css फ़ाइल में रखा जाता है और फिर HTML डॉक्यूमेंट के <link>टैग का उपयोग करके वो .css फ़ाइल को web page से जोड़ा जाता है। यह एक पेज की डिज़ाइन को अन्य पेजों के साथ शेयर करने की अनुमति देता है।

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

Css कैसे कार्य करता है?

CSS वेब पेजों के स्टाइल और appearance को नियंत्रित करने के लिए कार्य करता है, और यह वेब पेज के HTML टैग को कैसे प्रदर्शित करना है वो निर्धारित करता है। यहाँ पर CSS कैसे कार्य करता है, इसकी विस्तृत जानकारी है:

Selection: CSS काम करने का पहला स्टेप यह है कि आपको उन HTML टैग को चुनना होता है जिनकी स्टाइलिंग को आप बदलना चाहते हैं। इसके लिए आप विभिन्न selector function का उपयोग कर सकते हैं, जैसे कि टैग के names, classes, और IDs।

Properties: एक बार जब आप टैग को चुन लेते हैं, तो आपको उन्हें जिन CSS Properties के लिए स्टाइल करना है वो निर्धारित करना होता है। property विभिन्न चीजों की तरह हो सकते हैं, जैसे कि फ़ॉन्ट, रंग, पैडिंग, और अन्य स्टाइल प्रॉपर्टी।

Value: हर property के साथ, आपको विशिष्ट Value निर्धारित करना होता है, जो बताता है कि उस Value कैसा दिखना चाहिए। Value एक color, shape, number, या अन्य विशेष विशेषता हो सकता है।

Cascade: एक वेब पेज पर कई CSS नियम हो सकते हैं, और वे एक दूसरे के साथ प्रभावित होते हैं। इसे “cascading” कहा जाता है। जब एक टैग के लिए execution होता है, तो सभी मान्यताएँ और प्राथमिकताएँ निर्धारित की जाती हैं, और उन्हें मिलाकर एक फ़ाइनल स्टाइलिंग निर्धारित होती है।

Rendering: एक बार स्टाइलिंग निर्धारित हो जाती है, वेब ब्राउज़र या अन्य वेब डिवाइस उसे रेंडर करते हैं, जिससे वेब पेज का appearance यूजर के सामने आता है।

CSS में अच्छा होने में कितना समय लगता है?

CSS को पूरी तरह से सीखने और master करने में समय कितना लगता है, यह व्यक्ति की पूर्व ज्ञान, विशेष उद्देश्य और प्रैक्टिस के आधार पर निर्भर करता है। कुछ लोग CSS को एक-दो महीने में आसानी से सीख लेते हैं, जबकि दूसरों को इसमें कुछ महीने या साल लग सकते हैं।

पूर्व ज्ञान: यदि आपने पहले से ही HTML और वेब डिज़ाइन के सिद्धांत सीखे हैं, तो CSS को आसानी से सीख सकते है क्योंकि HTML और CSS एक ही साथ में उपयोग होते हैं।

प्रैक्टिस: CSS को सीखने के लिए ज्यादा प्रैक्टिस की आवश्यकता होती है। आपको विभिन्न web project पर काम करना और वेबसाइटों को स्टाइल करने में समय खर्च करना होगा।

संसाधन: आपके पास अच्छे सीखने के साधन होने चाहिए, जैसे कि ऑनलाइन ट्यूटरियल्स, किताबें, वीडियो क्लासेस और कोडिंग विकल्प।

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

Css कैसे सीखे ?

CSS सीखने के लिए निम्नलिखित कदमों का पालन करें:

Get Basic Knowledge: CSS सीखने से पहले, आपको HTML का बेसिक ज्ञान होना चाहिए, क्योंकि CSS HTML के एलिमेंट को स्टाइल करने में मदद करता है। HTML सीखने के बाद, आप CSS की ओर बढ़ सकते हैं।

Online Tutorials और Video Classes: आप वेब पर बेहद सारे फ्री और ट्यूटरियल्स और वीडियो क्लासेज ढूंढ सकते हैं जो CSS को सीखने में मदद कर सकती हैं। W3Schools, MDN Web Docs, Codecademy, Khan Academy, और freeCodeCamp हैं।

Follow Interactive Classes और Courses: आपको वेब डेवलपमेंट और CSS के लिए ऑनलाइन कोर्स भी मिल सकते हैं। Coursera, edX, Udemy, और Udacity जैसे platforms पर CSS को सीखने के लिए विभिन्न कोर्स मौजूद हैं।

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

Test on Different Devices: आपके बनाए गए CSS स्टाइल्स को विभिन्न डिवाइस और ब्राउज़र पर टेस्ट करें, ताकि आप डिज़ाइन को सभी यूजर के लिए सुन्दर बना सकें।

Stay Informed और Updated: वेब डेवलपमेंट और CSS दुनिया में नए एलिमेंट और स्टाइलिंग तकनीकों का सामय-समय पर अध्ययन करें, क्योंकि यह field बदलता रहता है।

Build Personal Projects: एक बार जब आपको CSS की अच्छी समझ हो जाए, तो पर्सनल प्रोजेक्ट्स बनाने का प्रयास करें।

Join the Community: वेब डेवलपमेंट की विशेषज्ञता और ज्ञान बढ़ाने के लिए वेब डेवलपमेंट समुदाय से जुड़ें।

CSS के फायदे

Design Consistency
Responsive Design
Control of Block and Inline Elements
Cross-Browser Compatibility
Faster Page Loading
Maintainability
SEO (Search Engine Optimization)
Website Branding

CSS के नुकसान

Cross-Browser Compatibility Challenges
Specific Website Issues
Increased Code Complexity
Loading Time
CSS Specificity
Styling Abstraction
Mobile Responsiveness
Need for CSS Frameworks

HTML के फायदे और नुकसान क्या है?