CSS Full Form | सीएसएस क्या है?

 Css का नाम अपने भी जरूर ही सुना होगा क्या आपको css के बारे में पता है।

इस पोस्ट में आप css के बारे में पढ़ने वाले है; जैसे - सीएसएस क्या है? Css का full form क्या होता है? Css का क्या उपयोग किया जाता है? इसके अलावा css सिंटेक्स आदि सारी चीजे मिलने वाली है। तो चलिए सबसे पहले जानते हैं कि css का full form क्या होता है -


CSS Full Form (सीएसएस का फूल फॉर्म क्या होता है?)

CSS - CASCADING STYLE SHEET (कैस्कैडिंग स्टाइल शीट)


What is CSS (सीएसएस क्या है?)

कैस्केडिंग स्टाइल शीट, जिसे css भी कहा जाता है। CSS, HTML में जोड़ी गई एक ऐसी नई सुविधा है, जो वेब डेवलपर को यह नियंत्रित करने की सुविधा प्रदान करता है कि वेब पेज किस प्रकार प्रदर्शित होगा।



Use of CSS (CSS का उपयोग क्या है?)

सीएसएस के साथ हम अपने पुराने HTML को एक नया रूप प्रदान कर सकते है, CSS कोड में थोड़ा सा परिवर्तन करके वेबसाइट को पूर्णतः रिस्टाइल (Restyle) किया जा सकता है। एक स्टाइल शीट HTML डॉक्यूमेंट से पूर्णतः पृथक हो सकती है। CSS के साथ वेब डेवलपर विभिन्न स्टाइल शीट्स क्रिएट कर सकता है,

जो यह परिभाषित करती है कि विभिन्न एलिमेंट्स; जैसे - Headers और Links आदि को किस प्रकार प्रदर्शित करके इन स्टाइल शीट्स को किसी भी वेब पेज पर कैसे अप्लाई किया जा सकता है। CSS को वर्ल्ड वाइड वेब कंसोर्टियम (World Wide Web Consortium - W3C) द्वारा विकसित किया गया है।

CSS स्टाइल ने एचटीएमएल की बड़ी समस्याओं को हल कर दिया है। CSS को सामान्यतः बाहरी फाइल्स, जिनका एक्सटेंशन .CSS होता है, में सेव किया जाता है। ये बाहरी स्टाइल हमें किसी वेबसाइट के सभी पेजिज के प्रदर्शन और लेआउट को परिवर्तन करने योग्य बनती है। इसके लिए हमें केवल एक फाइल को हमें अपने डॉक्यूमेंट में जोड़ना होता है।

आइए अब CSS के सिंटेक्स के बारे में भी थोड़ा जानते है


CSS Syntax (CSS सिंटेक्स)


CSS में प्रयोग की जाने वाली अधिकांश प्रॉपर्टीज, HTML के समान ही होती है। अतः यदि HTML से भली भांति परिचित हैं, तो आपको CSS को समझने में सरलता होगी। CSS के सिंटैक्स में दो मुख्य भाग होते है - पहला सिलेक्टर (Selector) और दूसरा एक अथवा एक से अधिक डिक्लेरेशन (One or more declaration)।

CSS सिंटेक्स का प्रारूप
सामान्यतः सेलेक्टर वह एचटीएमएल होता है, जिसके लिए हम स्टाइल को परिभाषित करना चाहते हैं


Selector {property: value;}
                   Declaration


डिक्लेरेशन ब्लॉक एक या एक से अधिक डिक्लेरेशन , जो सेमिकॉलन के द्वारा पृथक हाइट हैं, को सम्मिलित करता है।
प्रत्येक डिक्लेरेशन प्रॉपर्टी नाम और वैल्यू शामिल करता है जो कॉलन(:) के द्वारा पृथक (Seprate) होते है।
CSS डिक्लेरेशन सदैव सेमिकॉलन (;) के साथ समाप्त होता है और डिक्लेरेशन गुप्स को curly braces {} के मध्य लिखा जाता है।
     P {color:red; text - align:CENTER;}

आइए अब सीएसएस के आईडी सेलेक्टर और क्लास सेलेक्टर  के बारे में जानते हैं

Id सेलेक्टर और class सिलेक्टर (ID Selector and Class Selector)

सीएसएस में हमें HTML एलिमेंट के लिए स्टाइल का निर्धारण करने के लिए अतिरिक्त अपना सिलेक्टर निर्धारित करने की अनुमति देता है। ये सिलेक्टर्स ID और CLASS हैं। एक अन्य एलिमेंट को आइडेंटिफाई करने के लिए आईडी ATTRIBUTE का उपयोग किया जाता है।


एक ही डॉक्यूमेंट में समान ID के दो एलिमेंट नहीं हो सकते। ID सिलेक्टर, HTML डॉक्यूमेंट के ID अटरिबुट का प्रयोग करता है और जिसे हैस (#) के साथ परिभाषित किया जाता है।
आइए अब CSS में समूह के बारे में जानते है

समूह (Group)

सिलेक्टरों और डिक्लेरेशन को एक समूह में रख सकते है और प्रत्येक सिलेक्टर को कॉमा (,) द्वारा भिन्न कर सकते हैं।
उदाहरण के लिए यदि सम्पूर्ण हैडिंग का रंग एक जैसा करना चाहते है तो इसके लिए प्रत्येक हैडिंग का अलग अलग नियम बनाने के स्थान पर, उन्हें एक समूह में रख सकते हैं; जैसे - H1, H2, H3, H4, H5, H6 {color : blue;} ।

अब आइए जानते हैं कि किस प्रकार से सीएसएस को इंसर्ट लिए जाता है


CSS को इंसर्ट करना (Inserting CSS)

किसी HTML डॉक्यूमेंट में स्टाइल सीट को चार प्रकार से इंसर्ट किया जाता है एक्सटर्नल स्टाइल शीट (External Style Sheet), इंटरनल स्टाइल शीट (Internal Style Sheet), इनलाइन स्टाइल शीट (Inline Style) और मल्टीपल स्टाइल शीट्स (Multiple Style Sheets)।

एक्सटर्नल स्टाइल शीट (External Style Sheet)
जब स्टाइल को अधिक पेजीज़ पर अप्लाई करना होता है, तब एक्सटर्नल स्टाइल शीट उपयुक्त होती है। एक्सटर्नल स्टाइल शीट के साथ हम एक फाइल को परिवर्तित करते ही सम्पूर्ण वेबसाइट का प्रदर्शन परिवर्तित कर सकते हैं।

 इसके लिए वेबसाइट के प्रत्येक पेज के लिए <LINK> टैग का प्रयोग करके स्टाइल शीट से लिंक होना आवश्यक होता है। <LINK> टैग <HEAD> सेक्शन के अन्तर्गत आता है।


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


इंटर्नल स्टाइल शीट (Internal Style Sheet)


इंटर्नल स्टाइल शीट का उपयोग इस समय किया जाना चाहिए, जब हमें किसी एक वेब पेज को एक अन्य स्टाइल प्रदान करना होता है। इंटर्नल स्टाइल HTML डॉक्यूमेंट के <HEAD> सेक्शन में <STYLE> टैग के प्रयोग द्वारा परिभाषित किया जाता है।

इनलाइन स्टाइल (Inline Style)


कंटेंट्स को प्रेजेंटेशन के साथ मिश्रित करके इनलाइन स्टाइल, स्टाइल शीट्स के अनेक लाभ को Depreciate देती है। तीनो प्रकार की CSSs में से इनलाइन स्टाइल को प्राथमिकता प्राप्त है। इसका आशय यह है कि हम एक्सटर्नल स्टाइल शीट अथवा इंटर्नल स्टाइल शीट में परिभाषित स्टाइल्स को डिलीट करके इनलाइन स्टाइल को अप्लाई कर सकते हैं।


 चूंकि इनलाइन स्टाइल, CSS के वास्तविक उद्देश्यों को कम करती है। अतः इसका प्रयोग सोच समझकर किया जाना चाहिए।
इनलाइन स्टाइल का प्रयोग करने के लिए हमें रेलेवेंट एलिमेंट के स्टाइल ATTRIBUTE का प्रयोग करना होता है। स्टाइल ATTRIBUTE किसी भी CSS प्रॉपर्टी को धारण कर सकती है।



मल्टीपल स्टाइल शीट्स (Multiple Style Sheets)


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

 यदि किसी एक सिलेक्टर के लिए कुछ प्रॉपर्टीज या निर्धारण विभिन्न स्टाइल शीट्स में किया जाता है, तो अधिक प्राथमिकता प्राप्त वाली स्टाइल शीट निर्धारित वैल्यूज अप्लाई होती है।

उदाहरण, एक HTML डॉक्यूमेंट में H3 सेलेक्टर के लिए एक्सटर्नल स्टाइल शीट में प्रॉपर्टीज को निम्नानुसार प्रदान की गई हैं।
H3
{
color: red;
text - align : left;
font - size : Bpt;
}



Post a Comment

0 Comments