# टेरारियम प्रोजेक्ट भाग २: CSS को परिचय
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
## प्रि-लेक्चर क्विज
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/17)
### परिचय
CSS, वा Cascading Style Sheets, वेब विकासको एउटा महत्त्वपूर्ण समस्या समाधान गर्छ: तपाईंको वेबसाइटलाई राम्रो देखाउने। तपाईंको एप्सलाई स्टाइलिङ गर्दा तिनीहरूलाई प्रयोग गर्न सजिलो र आकर्षक बनाउँछ; CSS प्रयोग गरेर तपाईं Responsive Web Design (RWD) पनि बनाउन सक्नुहुन्छ - जसले तपाईंको एप्सलाई जुनसुकै स्क्रिन साइजमा राम्रो देखिन मद्दत गर्दछ। CSS केवल तपाईंको एपलाई राम्रो देखाउन मात्र होइन; यसको स्पेसिफिकेसनमा एनिमेसन र ट्रान्सफर्महरू पनि समावेश छन् जसले तपाईंको एप्सका लागि परिष्कृत अन्तरक्रियाहरू सक्षम गर्न सक्छ। CSS वर्किङ ग्रुपले हालको CSS स्पेसिफिकेसनहरू कायम राख्न मद्दत गर्दछ; तपाईं [World Wide Web Consortium को साइट](https://www.w3.org/Style/CSS/members) मा उनीहरूको कामलाई पछ्याउन सक्नुहुन्छ।
> नोट गर्नुहोस्, CSS एक भाषा हो जुन वेबमा सबै कुराजस्तै विकसित हुन्छ, र सबै ब्राउजरहरूले नयाँ स्पेसिफिकेसनको भागलाई समर्थन गर्दैनन्। [CanIUse.com](https://caniuse.com) परामर्श गरेर सधैं तपाईंको कार्यान्वयनहरू जाँच गर्नुहोस्।
यस पाठमा, हामी हाम्रो अनलाइन टेरारियममा स्टाइलहरू थप्नेछौं र CSS का केही अवधारणाहरूको बारेमा थप जान्नेछौं: क्यास्केड, इनहेरिटेन्स, र चयनकर्ताहरूको प्रयोग, पोजिसनिङ, र CSS प्रयोग गरेर लेआउटहरू निर्माण गर्ने। यस प्रक्रियामा हामी टेरारियमको लेआउट बनाउनेछौं र वास्तविक टेरारियम निर्माण गर्नेछौं।
### पूर्वापेक्षा
तपाईंको टेरारियमको HTML तयार र स्टाइल गर्न तयार हुनुपर्छ।
> भिडियो हेर्नुहोस्
>
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### कार्य
तपाईंको टेरारियम फोल्डरमा, `style.css` नामक नयाँ फाइल बनाउनुहोस्। उक्त फाइललाई `` सेक्सनमा इम्पोर्ट गर्नुहोस्:
```html
```
---
## क्यास्केड
Cascading Style Sheets ले स्टाइलहरू 'क्यास्केड' हुने विचारलाई समावेश गर्दछ जसले गर्दा स्टाइलको प्रयोग यसको प्राथमिकताले निर्देशित हुन्छ। वेबसाइट लेखकद्वारा सेट गरिएका स्टाइलहरू ब्राउजरद्वारा सेट गरिएका स्टाइलहरू भन्दा प्राथमिकता लिन्छन्। 'इनलाइन' सेट गरिएका स्टाइलहरू बाह्य स्टाइल शीटमा सेट गरिएका स्टाइलहरू भन्दा प्राथमिकता लिन्छन्।
### कार्य
तपाईंको `
```
त्यसपछि, तपाईंको `style.css` फाइलमा निम्न कोड थप्नुहोस्:
```CSS
h1 {
color: blue;
}
```
✅ तपाईंको वेब एपमा कुन रंग देखिन्छ? किन? के तपाईं स्टाइलहरूलाई ओभरराइड गर्ने तरिका पत्ता लगाउन सक्नुहुन्छ? तपाईंले यो कहिले गर्न चाहनुहुन्छ, वा किन नगर्ने?
---
## इनहेरिटेन्स
स्टाइलहरू एक पूर्वजको स्टाइलबाट वंशजमा इनहेरिट हुन्छन्, जसले गर्दा नेस्टेड तत्वहरूले आफ्ना अभिभावकहरूको स्टाइल इनहेरिट गर्छन्।
### कार्य
बडीको फन्टलाई एक निश्चित फन्टमा सेट गर्नुहोस्, र नेस्टेड तत्वको फन्ट जाँच गर्नुहोस्:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
```
तपाईंको ब्राउजरको कन्सोलमा 'Elements' ट्याब खोल्नुहोस् र H1 को फन्ट अवलोकन गर्नुहोस्। यसले बडीबाट आफ्नो फन्ट इनहेरिट गर्छ, ब्राउजर भित्र उल्लेख गरिए अनुसार:
✅ के तपाईं नेस्टेड स्टाइललाई फरक गुण इनहेरिट गर्न सक्नुहुन्छ?
---
## CSS चयनकर्ताहरू
### ट्यागहरू
अहिलेसम्म, तपाईंको `style.css` फाइलमा केवल केही ट्यागहरू स्टाइल गरिएको छ, र एप अजीब देखिन्छ:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
```
ट्यागलाई यस तरिकाले स्टाइल गर्दा तपाईंलाई अद्वितीय तत्वहरूमा नियन्त्रण दिन्छ, तर तपाईंलाई टेरारियममा धेरै बिरुवाहरूको स्टाइल नियन्त्रण गर्न आवश्यक छ। त्यसका लागि, तपाईंले CSS चयनकर्ताहरूको उपयोग गर्न आवश्यक छ।
### Ids
बायाँ र दायाँ कन्टेनरहरूको लेआउटमा केही स्टाइल थप्नुहोस्। चूंकि मार्कअपमा केवल एक बायाँ कन्टेनर र केवल एक दायाँ कन्टेनर छ, तिनीहरूलाई Ids दिइएको छ। तिनीहरूलाई स्टाइल गर्न, `#` प्रयोग गर्नुहोस्:
```CSS
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
```
यहाँ, तपाईंले यी कन्टेनरहरूलाई स्क्रिनको टाढा बायाँ र दायाँमा राख्नको लागि पूर्ण पोजिसनिङको साथ राख्नुभएको छ, र तिनीहरूको चौडाइको लागि प्रतिशत प्रयोग गर्नुभएको छ ताकि तिनीहरू साना मोबाइल स्क्रिनहरूको लागि स्केल गर्न सकून्।
✅ यो कोड धेरै दोहोरिएको छ, त्यसैले "DRY" (Don't Repeat Yourself) छैन; के तपाईं Ids लाई स्टाइल गर्ने राम्रो तरिका पत्ता लगाउन सक्नुहुन्छ, सम्भवतः Id र क्लासको साथ? तपाईंले मार्कअप परिवर्तन गर्न र CSSलाई पुनः संरचना गर्न आवश्यक हुनेछ:
```html
```
### क्लासहरू
माथिको उदाहरणमा, तपाईंले स्क्रिनमा दुई अद्वितीय तत्वहरूलाई स्टाइल गर्नुभएको छ। यदि तपाईं चाहनुहुन्छ कि स्क्रिनमा धेरै तत्वहरूमा स्टाइल लागू होस्, तपाईं CSS क्लासहरू प्रयोग गर्न सक्नुहुन्छ। यसलाई बायाँ र दायाँ कन्टेनरहरूमा बिरुवाहरूको लेआउट गर्न प्रयोग गर्नुहोस्।
ध्यान दिनुहोस् कि HTML मार्कअपमा प्रत्येक बिरुवामा Ids र क्लासहरूको संयोजन छ। यहाँ Ids लाई पछि तपाईंले टेरारियम बिरुवा प्लेसमेन्टलाई हेरफेर गर्न थप्ने JavaScript द्वारा प्रयोग गरिन्छ। क्लासहरू, यद्यपि, सबै बिरुवाहरूलाई एक निश्चित स्टाइल दिन्छ।
```html
```
तपाईंको `style.css` फाइलमा निम्न थप्नुहोस्:
```CSS
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
```
यस स्निपेटमा उल्लेखनीय कुरा भनेको सापेक्ष र पूर्ण पोजिसनिङको मिश्रण हो, जुन हामी अर्को सेक्सनमा कभर गर्नेछौं। उचाइहरू प्रतिशतद्वारा कसरी ह्यान्डल गरिन्छ भन्ने कुरालाई ध्यान दिनुहोस्:
तपाईंले बिरुवा होल्डरको उचाइलाई १३% मा सेट गर्नुभएको छ, यो राम्रो संख्या हो जसले सुनिश्चित गर्दछ कि सबै बिरुवाहरू प्रत्येक ठाडो कन्टेनरमा स्क्रोलिङको आवश्यकता बिना प्रदर्शन गरिन्छ।
तपाईंले बिरुवा होल्डरलाई बायाँतिर सार्न सेट गर्नुभएको छ ताकि बिरुवाहरू आफ्नो कन्टेनर भित्र बढी केन्द्रित देखिन्छन्। छविहरूमा ठूलो मात्रामा पारदर्शी पृष्ठभूमि छ ताकि तिनीहरूलाई बढी ड्र्याग गर्न मिल्ने बनाइयोस्, त्यसैले स्क्रिनमा राम्रोसँग फिट गर्न तिनीहरूलाई बायाँतिर धकेल्न आवश्यक छ।
त्यसपछि, बिरुवालाई १५०% को अधिकतम चौडाइ दिइएको छ। यसले ब्राउजर स्केल डाउन हुँदा यसलाई स्केल डाउन गर्न अनुमति दिन्छ। तपाईंको ब्राउजरलाई पुनः आकार दिन प्रयास गर्नुहोस्; बिरुवाहरू आफ्नो कन्टेनरहरूमा रहन्छन् तर फिट हुन स्केल डाउन गर्छन्।
त्यसपछि, z-index को प्रयोग उल्लेखनीय छ, जसले तत्वको सापेक्ष उचाइलाई नियन्त्रण गर्छ (ताकि बिरुवाहरू कन्टेनरमा बस्छन् र टेरारियम भित्र बसिरहेको देखिन्छन्)।
✅ किन तपाईंलाई बिरुवा होल्डर र बिरुवा CSS चयनकर्ता दुवै आवश्यक छ?
## CSS पोजिसनिङ
पोजिसन गुणहरू (जस्तै स्ट्याटिक, रिलेटिभ, फिक्स्ड, एब्सोल्युट, र स्टिकी पोजिसनहरू) मिश्रण गर्नु अलि जटिल हुन सक्छ, तर जब सही तरिकाले गरिन्छ, यसले तपाईंको पृष्ठहरूमा तत्वहरूमा राम्रो नियन्त्रण दिन्छ।
पूर्ण पोजिसन गरिएको तत्वहरू नजिकको पोजिसन गरिएको पूर्वजहरूमा आधारित पोजिसन गरिन्छ, र यदि त्यहाँ कुनै छैन भने, यो कागजातको शरीर अनुसार पोजिसन गरिन्छ।
रिलेटिभ पोजिसन गरिएको तत्वहरू CSS को निर्देशनहरूमा आधारित हुन्छन् जसले यसको प्रारम्भिक पोजिसनबाट टाढा यसको प्लेसमेन्ट समायोजन गर्दछ।
हाम्रो नमूनामा, `plant-holder` एक रिलेटिभ-पोजिसन गरिएको तत्व हो जुन पूर्ण-पोजिसन गरिएको कन्टेनर भित्र पोजिसन गरिएको छ। परिणामी व्यवहार भनेको साइड बार कन्टेनरहरू बायाँ र दायाँमा पिन गरिन्छन्, र plant-holder नेस्टेड हुन्छ, साइड बारहरू भित्र समायोजन गर्दै, बिरुवाहरूलाई ठाडो पङ्क्तिमा राख्न ठाउँ दिन्छ।
> `plant` आफैं पनि पूर्ण पोजिसनिङमा छ, यसलाई ड्र्याग गर्न मिल्ने बनाउन आवश्यक छ, जस्तो तपाईंले अर्को पाठमा पत्ता लगाउनुहुनेछ।
✅ साइड कन्टेनरहरू र plant-holder को पोजिसनिङ प्रकारहरू स्विच गर्ने प्रयास गर्नुहोस्। के हुन्छ?
## CSS लेआउटहरू
अब तपाईंले CSS प्रयोग गरेर टेरारियम आफैं निर्माण गर्न सिकेको कुरा प्रयोग गर्नुहुनेछ!
पहिले, `.terrarium` div बच्चाहरूलाई CSS प्रयोग गरेर गोलाकार आयतको रूपमा स्टाइल गर्नुहोस्:
```CSS
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
यहाँ प्रतिशतहरूको प्रयोगलाई ध्यान दिनुहोस्। यदि तपाईं आफ्नो ब्राउजरलाई स्केल डाउन गर्नुहुन्छ भने, तपाईं देख्न सक्नुहुन्छ कि जार पनि कसरी स्केल हुन्छ। जार तत्वहरूको चौडाइ र उचाइ प्रतिशतहरू र प्रत्येक तत्वलाई पूर्ण रूपमा केन्द्रमा पोजिसन गरिएको छ, भ्यूपोर्टको तल पिन गरिएको छ।
हामी `rem` पनि प्रयोग गर्दैछौं, जुन फन्ट-सापेक्ष लम्बाइ हो। यस प्रकारको सापेक्ष मापनको बारेमा थप पढ्न [CSS स्पेसिफिकेसन](https://www.w3.org/TR/css-values-3/#font-relative-lengths) हेर्नुहोस्।
✅ जारको रंग र अपासिटीलाई माटोको तुलनामा परिवर्तन गर्ने प्रयास गर्नुहोस्। के हुन्छ? किन?
---
## GitHub Copilot Agent चुनौती 🚀
Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
**विवरण:** टेरारियमका बिरुवाहरूलाई CSS एनिमेसनको प्रयोग गरेर हल्का हावा चलिरहेको प्रभाव दिनुहोस्। यसले CSS एनिमेसन, ट्रान्सफर्म्स, र कीफ्रेमहरू अभ्यास गर्न मद्दत गर्नेछ र तपाईंको टेरारियमको दृश्य अपीललाई बढावा दिनेछ।
**प्रेरणा:** CSS कीफ्रेम एनिमेसनहरू थप्नुहोस् जसले टेरारियमका बिरुवाहरूलाई हल्का हावा चलिरहेको जस्तो बायाँ र दायाँ साइडमा हल्का घुमाउने बनाउँछ। प्रत्येक बिरुवालाई हल्का (२-३ डिग्री) बायाँ र दायाँ घुमाउने एनिमेसन बनाउनुहोस्, जसको अवधि ३-४ सेकेन्ड होस्, र यसलाई `.plant` क्लासमा लागू गर्नुहोस्। सुनिश्चित गर्नुहोस् कि एनिमेसन अनन्त रूपमा लुप्स हुन्छ र प्राकृतिक गतिका लागि इजिङ फङ्सन छ।
---
## 🚀चुनौती
जारको बायाँ तल्लो भागमा 'बबल' चमक थप्नुहोस् ताकि यो अधिक गिलास जस्तो देखियोस्। तपाईं `.jar-glossy-long` र `.jar-glossy-short` लाई प्रतिबिम्बित चमक जस्तो देखिने गरी स्टाइल गर्नुहुनेछ। यसले यसरी देखिनेछ:
पोस्ट-लेक्चर क्विज पूरा गर्न, यो Learn मोड्युलमा जानुहोस्: [तपाईंको HTML एपलाई CSS द्वारा स्टाइल गर्नुहोस्](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## पोस्ट-लेक्चर क्विज
[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/18)
## समीक्षा र आत्म अध्ययन
CSS देख्नमा सरल लाग्छ, तर सबै ब्राउजरहरू र सबै स्क्रिन साइजहरूको लागि एपलाई पूर्ण रूपमा स्टाइल गर्न खोज्दा धेरै चुनौतीहरू आउँछन्। CSS-Grid र Flexbox उपकरणहरू विकास गरिएको छ जसले कामलाई अलि बढी संरचित र भरपर्दो बनाउँछ। यी उपकरणहरूको बारेमा [Flexbox Froggy](https://flexboxfroggy.com/) र [Grid Garden](https://codepip.com/games/grid-garden/) खेल खेल्दै सिक्नुहोस्।
## असाइनमेन्ट
[CSS पुनःसंरचना](assignment.md)
---
**अस्वीकरण**:
यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
