क्यास्केडिङ स्टाइल शीट, वा CSS, एउटा भाषा हो जसले वेबपेजलाई कसरी देखिने भनेर बताउँछ। CSS ले वेबसाइटको सादा संरचनामा रंग, शैली र लेआउट थप्छ। जसरी तपाईंले राम्रो र सफा देखिनको लागि आफ्नो लुगा छान्नुहुन्छ, त्यसरी नै CSS ले वेबपेजलाई सजाउन र आकर्षक देखिन मद्दत गर्छ। वेब विकासमा, हामी पृष्ठमा पाठ र बक्सहरूको रंग, आकार र स्थिति परिवर्तन गर्न CSS प्रयोग गर्छौं। यो पाठले तपाईंलाई सरल भाषामा CSS को आधारभूत कुराहरूसँग परिचय गराउनेछ। हामी CSS के हो, यो किन महत्त्वपूर्ण छ, र यसले HTML सँग कसरी काम गर्छ भनेर सिक्नेछौं।
CSS भनेको क्यास्केडिङ स्टाइल शीट हो। यो वेबपेजहरूलाई स्टाइल गर्न प्रयोग गरिने विशेष भाषा हो। CSS लाई भवनको रंग र सजावटको रूपमा सोच्नुहोस्। भवन HTML बाट बनेको हुन्छ, र CSS ले यसलाई सुन्दर बनाउँछ। CSS प्रयोग गरेर, तपाईं आफ्नो वेबपेजमा पृष्ठभूमि रङ, फन्ट शैलीहरू र तत्वहरू वरिपरि ठाउँ परिवर्तन गर्न सक्नुहुन्छ। CSS एउटा उपकरण हो जसले वेब डिजाइनरहरूलाई वेबसाइटहरूलाई राम्रो र रमाइलो देखाउन मद्दत गर्दछ।
कल्पना गर्नुहोस् तपाईं एउटा चित्र रंगाउँदै हुनुहुन्छ। चित्रका रेखाहरू वेबसाइटको आधारभूत संरचना जस्तै हुन्। CSS भनेको क्रेयन्स र मार्करहरू जस्तै हो जसले चित्रमा जीवन थप्छ। केही सरल नियमहरूको साथ, तपाईं आफ्नो सम्पूर्ण चित्रलाई सादाबाट रंगीनमा परिवर्तन गर्न सक्नुहुन्छ!
वेबसाइटहरूलाई आकर्षक र प्रयोग गर्न सजिलो बनाउन CSS प्रयोग गरिन्छ। यसले शैलीलाई सामग्रीबाट अलग राख्छ। यसको अर्थ पृष्ठमा रहेका शब्दहरू र चित्रहरू (HTML द्वारा प्रदान गरिएको) उस्तै रहन्छन्, जबकि CSS ले तिनीहरू कस्तो देखिन्छन् भनेर नियन्त्रण गर्छ। जब तपाईं शैली अपडेट गर्नुहुन्छ, तपाईंले सामग्री परिवर्तन गर्नुपर्दैन। यो विभाजनले वेब विकासकर्ताहरूलाई छिटो काम गर्न मद्दत गर्छ र साइटहरूलाई भ्रमण गर्न अझ राम्रो बनाउँछ।
CSS लाई तपाईंले रोज्नुभएको पोशाक जस्तै सोच्नुहोस्। यदि तपाईंले फरक लुगा लगाउनुभयो भने, तपाईं फरक देखिनुहुन्छ, तर तपाईं अझै पनि उही व्यक्ति हुनुहुन्छ। CSS ले वेबसाइटको जानकारी परिवर्तन नगरी यसको रूप परिवर्तन गर्छ। यसले केवल एउटा CSS फाइल सम्पादन गरेर सम्पूर्ण वेबसाइटको डिजाइन अपडेट गर्न सजिलो बनाउँछ।
CSS ले HTML सँगसँगै काम गर्छ। HTML भनेको वेबपेजमा चीजहरू कहाँ जान्छन् भनेर निर्धारण गर्ने आधार हो। त्यसपछि CSS ले रङ, फन्ट र शैली थप्न आउँछ। जब ब्राउजरले वेबपेज लोड गर्छ, यसले पहिले HTML सँग संरचना बनाउँछ र त्यसपछि CSS मा परिभाषित शैलीहरू लागू गर्छ।
CSS नियमहरूको सेटको रूपमा लेखिएको छ। प्रत्येक नियममा दुई भागहरू हुन्छन्: एउटा चयनकर्ता र एउटा घोषणा ब्लक। चयनकर्ताले ब्राउजरलाई कुन HTML तत्वलाई शैली बनाउने भनेर बताउँछ। घोषणा ब्लकमा एक वा बढी घोषणाहरू हुन्छन्। प्रत्येक घोषणामा एउटा गुण र एउटा मान हुन्छ। गुण भनेको तपाईंले परिवर्तन गर्न चाहनुभएको कुरा हो, र मानले यसलाई कसरी परिवर्तन गर्ने भनेर बताउँछ।
उदाहरणका लागि, पृष्ठको पृष्ठभूमि रङलाई हल्का नीलोमा सेट गर्न, तपाईंले यस्तो देखिने नियम लेख्न सक्नुहुन्छ:
<कोड>शरीर {
पृष्ठभूमि-रङ: हल्का नीलो;
}</code>यो साधारण नियमले सम्पूर्ण पृष्ठको पृष्ठभूमि परिवर्तन गर्छ।
आधारभूत CSS नियमले एउटा साधारण ढाँचा पछ्याउँछ। यसले चयनकर्ता र गुणहरू र मानहरूको ब्लक देखाउँछ। ढाँचा यस्तो देखिन्छ:
<कोड>चयनकर्ता {
सम्पत्ति: मान;
}</code>यहाँ, चयनकर्ताले कुन HTML तत्वलाई लक्षित गर्ने भनेर छनौट गर्छ। गुण भनेको तपाईंले परिवर्तन गर्न चाहनुभएको कुरा हो, र मान भनेको तपाईंले यसलाई कसरी परिवर्तन गर्न चाहनुहुन्छ भन्ने कुरा हो।
उदाहरणका लागि, यदि तपाईं सबै अनुच्छेद पाठ नीलो बनाउन चाहनुहुन्छ भने, तपाईंले लेख्नुहुन्छ:
<कोड>p {
रंग: नीलो;
}</code>यो नियमले वेब ब्राउजरलाई बताउँछ कि प्रत्येक <p> (अनुच्छेद) तत्वमा नीलो पाठ हुनुपर्छ।
CSS चयनकर्ताहरूले तपाईंलाई आफ्नो वेबपेजमा कुन तत्वहरू शैली नियमहरूद्वारा प्रभावित हुनेछन् भनेर छनौट गर्न दिन्छन्। धेरै प्रकारका चयनकर्ताहरू छन्, र प्रत्येकले अलि फरक तरिकाले काम गर्छ।
यी फरक चयनकर्ताहरूले तपाईंलाई आफ्नो वेबपेजको विशिष्ट भागहरूलाई शैलीबद्ध गर्न धेरै शक्ति दिन्छन्। तिनीहरूले तपाईंलाई तत्वहरूलाई सटीक रूपमा लक्षित गर्न र तिनीहरू कस्तो देखिने भनेर निर्णय गर्न अनुमति दिन्छन्।
CSS ले धेरै फरक गुणहरू प्रदान गर्दछ जुन तपाईंले आफ्नो वेबपेजलाई शैलीबद्ध गर्न प्रयोग गर्न सक्नुहुन्छ। प्रत्येक गुणले तपाईंलाई तत्वको उपस्थितिको एक विशिष्ट पक्ष परिवर्तन गर्न दिन्छ। केही सामान्य गुणहरू यस प्रकार छन्:
प्रत्येक CSS गुण पछि एउटा मान हुन्छ। उदाहरणका लागि, पाठलाई रातो रंग दिन, तपाईं लेख्न सक्नुहुन्छ:
<कोड>p {
रंग: रातो;
}</code>यो साधारण नियमले सबै अनुच्छेदहरूमा रातो पाठ हुन्छ। गुण रङले पाठ कसरी देखिन्छ भनेर नियन्त्रण गर्छ र रातो मानले कुन रंग हुनुपर्छ भनेर बताउँछ।
CSS मा "क्यास्केडिङ" शब्दको अर्थ शैलीहरू एउटा नियमबाट अर्को नियममा प्रवाहित हुन सक्छन् भन्ने हो। यदि एउटै तत्वमा दुई नियमहरू लागू हुन सक्छन् भने, क्रमले कुनले जित्छ भनेर निर्णय गर्न सक्छ। यो स्ट्याकिङ ब्लकहरू जस्तै हो जहाँ कहिलेकाहीं एउटा ब्लकले अर्कोको भाग ढाक्छ।
एउटा सामान्य नियम यो हो कि HTML तत्व भित्र सिधै लेखिएका शैलीहरू (जसलाई इनलाइन शैलीहरू भनिन्छ) ले तपाईंको CSS फाइलमा शैलीहरूलाई ओभरराइड गर्नेछ। अर्को नियम यो हो कि यदि कुनै अभिभावक तत्वलाई शैलीबद्ध गरिएको छ भने, यसको बाल तत्वहरूले त्यो शैलीलाई उत्तराधिकारमा लिन सक्छन् जबसम्म तिनीहरूलाई अन्यथा भनिएको छैन।
उदाहरणका लागि, यदि तपाईंले <div> को टेक्स्ट रङ हरियोमा सेट गर्नुभयो भने, <div> भित्रको टेक्स्ट प्रायः वंशानुगत कारणले हरियो देखिनेछ। यसले वेबपेजमा एकरूप डिजाइन कायम राख्न मद्दत गर्दछ।
CSS को साथ, तपाईं धेरै तरिकाले रङहरू परिवर्तन गर्न सक्नुहुन्छ। तपाईं रातो , नीलो र हरियो जस्ता सामान्य रङ नामहरू प्रयोग गर्न सक्नुहुन्छ। तपाईं रातोको लागि <code>#FF0000</code> जस्ता हेक्साडेसिमल कोडहरू वा <code>rgb(255, 0, 0)</code> जस्ता RGB मानहरू पनि प्रयोग गर्न सक्नुहुन्छ।
फन्टहरू CSS को अर्को महत्त्वपूर्ण भाग हुन्। फन्ट भनेको तपाईंले नोटबुकमा छनौट गर्नुभएको हस्तलेखनको शैली जस्तै हो। CSS मा, तपाईं फन्ट परिवार, आकार, तौल र शैली परिवर्तन गर्न सक्नुहुन्छ। उदाहरणका लागि, यदि तपाईं आफ्नो अनुच्छेदहरू Arial मा देखा पर्न चाहनुहुन्छ भने, तपाईं प्रयोग गर्न सक्नुहुन्छ:
<कोड>p {
फन्ट-परिवार: एरियल, सान्स-सेरिफ;
}</code>यो नियमले ब्राउजरलाई एरियल फन्ट उपलब्ध भएमा त्यसमा पाठ प्रदर्शन गर्न र नभएमा अर्को समान फन्ट प्रयोग गर्न भन्छ।
CSS प्रयोग गरेर रङ र फन्टहरू परिवर्तन गर्नाले पाठ पढ्न सजिलो हुन्छ र तपाईंको वेबपेज हेर्न अझ रोचक हुन्छ।
CSS बक्स मोडेल भनेको पृष्ठमा तत्वका विभिन्न भागहरू कसरी व्यवस्थित गरिएका छन् भनेर बुझ्ने एउटा तरिका हो। प्रत्येक तत्व बक्स जस्तै हुन्छ। बक्स मोडेलमा चार भागहरू हुन्छन्:
एउटा तस्बिरको कल्पना गर्नुहोस्। तस्बिर आफैंमा सामग्री हो। तस्बिरलाई वरिपरि राखिएको म्याट प्याडिङ जस्तै हो। यसलाई एकसाथ राख्ने फ्रेम भनेको किनारा हो। र फ्रेम वरिपरिको ठाउँ भनेको मार्जिन हो। यो मोडेल प्रयोग गरेर, तपाईं आफ्नो डिजाइनको सबै भागहरूमा उचित ठाउँ र सन्तुलन छ भनी सुनिश्चित गर्न सक्नुहुन्छ।
CSS केवल रङ र फन्टहरूको बारेमा मात्र होइन; यसले तपाईंलाई वेबपेजमा तत्वहरू व्यवस्थित गर्न पनि मद्दत गर्दछ। यसलाई लेआउट र स्थिति भनिन्छ। CSS को साथ, तपाईं पृष्ठमा प्रत्येक तत्व कहाँ देखा पर्ने भनेर निर्णय गर्न सक्नुहुन्छ।
वेबपेजको लेआउट नियन्त्रण गर्ने धेरै तरिकाहरू छन्, जसमा समावेश छन्:
यी लेआउट प्रविधिहरू प्रयोग गर्नु भनेको खेलौनाहरूलाई शेल्फमा मिलाउनु जस्तै हो। प्रत्येक खेलौना कहाँ राखिन्छ भनेर तपाईं निर्णय गर्नुहुन्छ ताकि तिनीहरू सबैमा पर्याप्त ठाउँ होस् र सफा देखियोस्। यसले तपाईंको वेबपेजलाई अझ व्यवस्थित र आमन्त्रित बनाउँछ।
HTML र CSS ले कसरी सँगै काम गर्छन् भन्ने कुराको उदाहरण यहाँ दिइएको छ। यो नमूना कोडले केही शैली सहितको साधारण वेबपेज देखाउँछ:
<कोड><!DOCTYPE html>
<html>>
<हेड>>
<शैली>
शरीर {
पृष्ठभूमि-रङ: हल्का नीलो;
}
h1 {
रंग: गाढा;
फन्ट-साइज: २४ पिक्सेल;
}
p {
रंग: हरियो;
फन्ट-साइज: १८ पिक्सेल;
}
</शैली>
</head>
<शरीर>>
<h1>मेरो पहिलो वेबपेज</h1>
<p>यो CSS प्रयोग गरेर स्टाइल गरिएको एउटा साधारण वेबपेज हो।</p>
</शरीर>
</html></कोड>यो कोडले हल्का नीलो पृष्ठभूमि रंगको वेबपेज सिर्जना गर्दछ। हेडर टेक्स्ट नेभी छ र अनुच्छेद टेक्स्ट हरियो छ। <code><style></code> ट्याग भित्रको CSS ले नियमहरू कसरी लेखिन्छन् र लागू गरिन्छ भनेर देखाउँछ।
तपाईंले आफ्नो HTML मा CSS तीन मुख्य तरिकाले थप्न सक्नुहुन्छ। परिस्थिति अनुसार प्रत्येक विधिको आफ्नै प्रयोग हुन्छ:
व्यावसायिक वेब विकासमा बाह्य विधि सबैभन्दा सामान्य छ किनभने यसले HTML लाई सफा राख्छ र तपाईंलाई एकैचोटि धेरै पृष्ठहरूमा शैलीहरू अद्यावधिक गर्न दिन्छ।
CSS धेरै तरिकाले धेरै उपयोगी छ। वेब विकासमा CSS प्रयोग गर्नुका केही फाइदाहरू यहाँ दिइएका छन्:
CSS प्रयोग गर्नु भनेको एउटा विशेष उपकरण बक्स हुनु जस्तै हो। उपकरण बक्समा भएका प्रत्येक उपकरणले तपाईंको वेबपेजको उपस्थिति सजिलै सुधार गर्न मद्दत गर्दछ। अभ्यास गर्दा, तपाईंले वेबसाइटहरूलाई सुन्दर र प्रयोगकर्ता-मैत्री बनाउन CSS कति शक्तिशाली हुन सक्छ भनेर देख्नुहुनेछ।
तपाईंले भ्रमण गर्ने हरेक वेबसाइटले कुनै न कुनै रूपमा CSS प्रयोग गर्दछ। तपाईंको मनपर्ने कार्टुन साइटहरूदेखि स्कूल परियोजना पृष्ठहरूसम्म, CSS ले रमाइलो र पढ्न सजिलो लेआउट सिर्जना गर्न मद्दत गर्दछ। जब तपाईं सफा स्पेसिङ र स्पष्ट पाठ भएको रंगीन वेबपेज देख्नुहुन्छ, यो CSS ले काम गरिरहेको हुन्छ।
खेल, कार्टुन, वा अनलाइन कथाहरू जस्ता लोकप्रिय वेबसाइटहरूको डिजाइनलाई विचार गर्नुहोस्। रङ, फन्ट र लेआउटहरूको विचारशील प्रयोगले यी वेबसाइटहरूलाई रोमाञ्चक र आकर्षक बनाउन मद्दत गर्दछ। ठूला स्क्रिन र साना फोन दुवैमा सामग्री राम्रो देखिन्छ भनी सुनिश्चित गर्दै, CSS एपहरू र मोबाइल साइटहरूमा पनि प्रयोग गरिन्छ।
दैनिक जीवनमा, CSS कोठा सजाउनु जस्तै हो। तपाईंले आफ्नो कोठाको लागि विषयवस्तु छनौट गर्न सक्नुहुन्छ, रंगीन चित्रहरू झुण्ड्याउन सक्नुहुन्छ, र आफ्नो फर्निचरलाई सफासँग मिलाउन सक्नुहुन्छ। CSS ले वेबसाइटहरूको लागि पनि त्यस्तै गर्छ। यसले डिजिटल स्पेसमा क्रम र सुन्दरता ल्याउँछ, आगन्तुकहरूको लागि रमाइलो बनाउँछ।
CSS बारे हामीले सिकेका मुख्य बुँदाहरू यहाँ छन्:
CSS वेब विकासको एक महत्त्वपूर्ण भाग हो, जसले साइटहरूलाई सुन्दर र नेभिगेट गर्न सजिलो बनाउँछ। तपाईंले थप अन्वेषण गर्दा र आफ्नै वेबपेजहरू निर्माण गर्ने प्रयास गर्दा, CSS तपाईंको रचनात्मकता व्यक्त गर्ने उपकरण हो भन्ने कुरा सम्झनुहोस्। रङ, फन्ट र लेआउटहरूसँग प्रयोग गर्न रमाइलो गर्नुहोस्, किनकि हरेक सानो परिवर्तनले राम्रोसँग डिजाइन गरिएको वेबसाइटको जादू थप्छ।
आफ्ना मनपर्ने वेबसाइटहरूको अभ्यास र अवलोकन गरिरहनुहोस्। तपाईंको ध्यान खिच्न र रमाइलो अनुभव सिर्जना गर्न विभिन्न शैलीहरू कसरी प्रयोग गरिन्छन् भन्ने कुरामा ध्यान दिनुहोस्। समयसँगै, तपाईंले सरल HTML संरचनाहरूलाई दृश्यात्मक रूपमा आकर्षक वेबपेजहरूमा रूपान्तरण गर्न CSS कति शक्तिशाली हुन सक्छ भनेर देख्नुहुनेछ।