संक्षिप्त नाम सीएसएस "कैस्केडिंग स्टाइल शीट्स" के लिए है। CSS का उपयोग वेबसाइटों और सभी उपकरणों पर उपयोग किए जाने वाले एप्लिकेशन को स्टाइल करने के लिए किया जाता है। स्टाइल शीट का उपयोग आमतौर पर HTML और जावास्क्रिप्ट जैसी फ्रंट-एंड प्रोग्रामिंग भाषा के साथ किया जाता है।

CSS को तीन तरीकों में से एक में लागू किया जा सकता है- इनलाइन, आंतरिक या बाह्य रूप से। हालांकि बाहरी सीएसएस अनुशंसित दृष्टिकोण है, ऐसे उदाहरण हैं जब कार्यान्वयन के दो शेष तरीके अधिक व्यावहारिक हो सकते हैं।

इस ट्यूटोरियल लेख में, आप आज ही एप्लिकेशन बनाना शुरू करने के लिए CSS की सभी मूल बातें सीखेंगे।

विभिन्न सीएसएस कार्यान्वयन विधियों का उपयोग कब करें

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

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

इनलाइन सीएसएस उदाहरण का उपयोग करना

मुख्य शीर्षक

उपरोक्त कोड की पंक्ति लाल रंग में लेपित "मुख्य शीर्षक" टेक्स्ट प्रदर्शित करेगी। यह संभवतः इनलाइन सीएसएस का उपयोग करने के एकमात्र व्यावहारिक कारणों में से एक है क्योंकि आमतौर पर केवल एक ही होता है एच 1 किसी दिए गए वेब पेज पर तत्व।

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

आंतरिक सीएसएस उदाहरण का उपयोग करना

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

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

बाहरी सीएसएस उदाहरण का उपयोग करना

में उपरोक्त कोड की पंक्ति सम्मिलित करना आपकी HTML फ़ाइल का टैग बाहरी CSS पद्धति का उपयोग करके आपके वेब पेज की स्टाइलिंग की सुविधा प्रदान करेगा। ऊपर दिए गए कोड का एकमात्र पहलू जो बदलेगा, वह है जिसे असाइन किया गया मान है href संपत्ति, जो हमेशा सीएसएस फ़ाइल का नाम होना चाहिए (.css एक्सटेंशन सहित)।

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

एच2{
रंग: पीला;
}

CSS मूल संरचना की खोज

मूल सीएसएस घोषणा में सात आवश्यक तत्व हैं, जैसा कि आप नीचे दिए गए उदाहरण से देख सकते हैं। स्टाइलिंग वरीयताओं के एक विशिष्ट सेट को प्राप्त करने के लिए वे सभी एक साथ काम करते हैं।

चयनकर्ता

CSS घोषणा में, एक चयनकर्ता या तो हो सकता है पहचान, ए कक्षा, एक तत्व, या कुछ विशेष उदाहरणों में, एक छद्म चयनकर्ता। ऊपर CSS संरचना में ए तत्व का उपयोग चयनकर्ता के रूप में किया जाता है, जिसका अर्थ है कि वेब पेज पर सभी लिंक लाल रंग में लेपित होंगे। अनिवार्य रूप से, चयनकर्ता का उद्देश्य उस तत्व (तत्वों) की पहचान करना है जिसे स्टाइल किया जाना चाहिए।

घोषणा प्रारंभ और समाप्ति

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

संपत्ति

एक घोषणा संरचना में सीएसएस संपत्ति सौ से अधिक विभिन्न प्रकार की संपत्ति में से एक हो सकती है। ऊपर CSS संरचना में प्रयुक्त संपत्ति प्रकार है रंग और यह गुण वेब पेज पर टेक्स्ट को लक्षित करता है। यदि आप और जानना चाहते हैं, तो हमारे देखें CSS गुणों और उनके उपयोग की विस्तृत सूची।

संपत्ति/मूल्य विभाजक

हालांकि यह छोटा और महत्वहीन लग सकता है, संपत्ति/मूल्य विभाजक सीएसएस संरचना में अन्य सभी तत्वों की तरह ही महत्वपूर्ण है। यदि ऐसा कोई उदाहरण है जहां इस तत्व को भुला दिया गया है, तो संपूर्ण सीएसएस घोषणा निष्पादित नहीं होगी।

महत्व

CSS गुण मान उस सटीक शैली का प्रतिनिधित्व करता है जिसे आप किसी दिए गए गुण पर लागू करना चाहते हैं। उपयोग के लिए उपलब्ध मान संपत्ति के प्रकार पर निर्भर हैं। उदाहरण के लिए, उपरोक्त संरचना में प्रयुक्त संपत्ति है रंग, जिसका अर्थ है कि इस गुण पर केवल एक ही प्रकार का मान लागू किया जा सकता है, एक रंग नाम। ए रंग मान को चार रूपों में से एक में प्रस्तुत किया जा सकता है: एक शब्द मान (जैसे ऊपर के उदाहरण में), एक हेक्साडेसिमल मान, एक एचएसएल (ह्यू, संतृप्ति, हल्कापन) मान, या एक आरजीबी (लाल, हरा, नीला) मान।

घोषणा विभाजक

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

आईडी और कक्षाएं क्या हैं?

आईडी तथा कक्षाओं CSS स्टाइलिंग प्रक्रिया में एक मौलिक भूमिका निभाते हैं। HTML तत्वों की तरह, CSS आईडी तथा कक्षाओं CSS घोषणा में चयनकर्ताओं के रूप में उपयोग किया जाता है। तथापि, कक्षाओं तथा आईडी एक HTML तत्व पर वरीयता लें।

CSS में सामान्य नियम यह है कि अंतिम शैली घोषणा जो आप किसी फ़ाइल में जोड़ते हैं, वह पहले की शैली की घोषणा को ओवरराइड कर देगी। इसलिए, यदि a. के साथ दो घोषणाएं हैं एच 2 एक सीएसएस फ़ाइल में चयनकर्ता, जो घोषणा अंतिम जोड़ी गई है वह पहले वाले लोगों को ओवरराइड करती है।

हालांकि, अगर यह एच 2 तत्व में एक है पहचान इसका उपयोग सीएसएस घोषणा में चयनकर्ता के रूप में किया जाता है, भले ही इसकी स्थिति (पहले या बाद में) एक सीएसएस घोषणा के लिए हो, जिसमें एच 2 इसके चयनकर्ता के रूप में तत्व, शैली में वरीयता पहचान घोषणा हमेशा तत्व पर पूर्वता लेगी। संक्षेप में, अनु पहचान अन्य शैली चयनकर्ताओं को ओवरराइड करेगा।

यह याद रखना महत्वपूर्ण है कि CSS घोषणा में, आईडी एक संख्या चिह्न से शुरू करें और कक्षाएं पूर्ण विराम से शुरू होती हैं। एक के बीच सबसे महत्वपूर्ण अंतर पहचान और एक कक्षा क्या वह एक है पहचान अद्वितीय है, जबकि a कक्षा दुहराया जा सकता है। उदाहरण के लिए, समान का एक संग्रह टैग वही दिए जा सकते हैं कक्षा नाम; हालांकि पहचान प्रत्येक की टैग अद्वितीय होना चाहिए।

विभिन्न प्रकार के चयनकर्ताओं की खोज

तीन बुनियादी प्रकार के चयनकर्ता हैं- सिंगल, मल्टीपल और नेस्टेड। अब तक, इस लेख में एकल चयनकर्ताओं को व्यापक रूप से कवर किया गया है।

CSS का उपयोग करते समय, ऐसे उदाहरण होंगे जब आप अलग-अलग तत्वों को अलग-अलग पदों पर चाहते हैं a वेब पेज की एक समान शैली है जो संपूर्ण वेब पेज पर लागू होने वाली सामान्य शैली से अलग है। इन उदाहरणों में, एकाधिक चयनकर्ताओं का उपयोग करने का तरीका जानना सहायक होगा।

मूल HTML टेम्पलेट उदाहरण

स्वागत

लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर, एडिपिसिसिंग एलीट। इम्पेडिट ओडिट voluptates
डिग्निसिमोस वॉलुप्टाटिबस टेनेटुर।  रेपुडियांडे, एनिमी कॉरपोरेशन!  वास्तुविद
टेम्पोरा नाला ऑफिसिया प्लेसैट क्विस्कम फेसरे एट! क्वॉड डोलोरे डोलोरिबस ईओएस!







के बारे में

लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर, एडिपिसिसिंग एलीट। इम्पेडिट ओडिट voluptates
डिग्निसिमोस वॉलुप्टाटिबस टेनेटुर।  रेपुडियांडे, एनिमी कॉरपोरेशन!  वास्तुविद
टेम्पोरा नाला ऑफिसिया प्लेसैट क्विस्कम फेसरे एट! क्वॉड डोलोरे डोलोरिबस ईओएस!







शीर्षक

लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। लैबोरे aspernatur vel dicta quod quibusdam!
ईए डेलेक्टस बैठो, लेबरिओसम ईओएस एपरियाम एस्परियोरेस? एड लेबरम इलो इन्वेंटरी क्वोस इस्ट डोलोरेस. में
इम्पेडिट फ्यूगिट एस्परियोरेस रेपेलेंडस हारुम मैक्सिमे वॉलुपेट सिट नल्ला ईक ऑफिसिस फुगा एनिमी,
इयरम में परफेरेंडिस आईयूर डोलोरम लेबरिओसम एनिम रीसीएनडिस! यूम कम डेलेक्टस इस्ट टेनेटुर भ्रष्ट
मोलिशिया, मिनिमा, मैग्नी और इस्टो आईडी की आवश्यकता है
एचआईसी मैक्सिमम को बाधित करें? Eius modi optio ad, nisi tempora sapiente?







शीर्षक

लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। लैबोरे aspernatur vel dicta quod quibusdam!
ईए डेलेक्टस बैठो, लेबरिओसम ईओएस एपरियाम एस्परियोरेस? एड लेबरम इलो इन्वेंटरी क्वोस इस्ट डोलोरेस. में
इम्पेडिट फ्यूगिट एस्परियोरेस रेपेलेंडस हारुम मैक्सिमे वॉलुपेट सिट नल्ला ईक ऑफिसिस फुगा एनिमी,
इयरम में परफेरेंडिस आईयूर डोलोरम लेबरिओसम एनिम रीसीएनडिस! यूम कम डेलेक्टस इस्ट टेनेटुर भ्रष्ट
मोलिशिया, मिनिमा, मैग्नी और इस्टो आईडी की आवश्यकता है
एचआईसी मैक्सिमम को बाधित करें? Eius modi optio ad, nisi tempora sapiente?

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

एकाधिक चयनकर्ताओं का उपयोग करना उदाहरण

# के बारे में, .सामग्री{
रंग सफेद;
पृष्ठभूमि-रंग: गहरा सियान;
}

एकाधिक चयनकर्ताओं का उपयोग करते समय, आपको हमेशा प्रत्येक चयनकर्ता को अल्पविराम का उपयोग करके अलग करना चाहिए। ऊपर दिए गए उदाहरण में दो चयनकर्ता हैं, एक पहचान और एक कक्षा. यदि अल्पविराम जो अनुसरण करता है के बारे मेंपहचान गायब है, CSS घोषणा निष्पादित नहीं होगी।

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

नेस्टेड चयनकर्ताओं का उपयोग करना उदाहरण

#आपका स्वागत है पी स्पैन{
लाल रंग;
}

ऊपर नेस्टेड चयनकर्ता में शामिल है a पहचान और दो HTML तत्व। जैसा कि आप ऊपर दिए गए उदाहरण से देख सकते हैं, एक नेस्टेड चयनकर्ता आपको समूह के भीतर एक विशिष्ट तत्व को लक्षित करने की क्षमता प्रदान करता है।

इसलिए, केवल अवधि में अनुभाग का टैग डिव उसके साथ स्वागत आईडी लाल रंग से रंगा जाएगा।

चाहे आप CSS जैसी स्टाइलिंग भाषा का उपयोग कर रहे हों या प्रोग्रामिंग भाषा का, आपको पूरी तरह से पता होना चाहिए कि टिप्पणी कैसे लिखी जाती है। एंटरप्राइज़-स्तरीय परियोजनाओं में टिप्पणियाँ आवश्यक हैं जहाँ कई डेवलपर्स एक साथ काम करते हैं, और यह छोटे पैमाने पर विकास करते समय भी उपयोगी होता है।

एक सीएसएस टिप्पणी में दो फॉरवर्ड स्लैश, दो तारांकन और एक टिप्पणी अनुभाग होता है।

/* इस प्रकार आप CSS में सिंगल लाइन कमेंट लिखते हैं */

/*
आप इस तरह लिखते हैं
एक बहु-पंक्ति टिप्पणी
सीएसएस में
*/

आगे क्या होगा?

यह लेख आपको CSS के मूलभूत घटक प्रदान करता है। अब आप एक पहचान का उपयोग कर सकते हैं:

• तीन CSS कार्यान्वयन विधियों में से कोई एक
• CSS घोषणा में सभी तत्व
• तीन बुनियादी प्रकार के चयनकर्ता
• एक सीएसएस टिप्पणी

फिर भी, यह अभी शुरुआत है। सीएसएस में कई ढांचे हैं जो आपको भाषा की बेहतर समझ विकसित करने में मदद करेंगे। एकमात्र चुनौती यह तय करना है कि आपके लिए कौन सा सबसे अच्छा है।

टेलविंड सीएसएस बनाम। बूटस्ट्रैप: कौन सा बेहतर ढांचा है?

CSS फ्रेमवर्क चुनते समय यह महत्वपूर्ण है कि वह आपकी आवश्यकताओं को पूरा करे।

आगे पढ़िए

लेखक के बारे में