CSS, or Cascading Style Sheets, solve an important problem of web development: how to make your web site look nice. Styling your apps makes them more usable and nicer-looking; you can also use CSS to create Responsive Web Design (RWD) - allowing your apps to look good no matter what screen size they are displayed on. CSS is not only about making your app look nice; its spec includes animations and transforms that can enable sophisticated interactions for your apps. The CSS Working Group helps maintain current CSS specifications; you can follow their work at [World Wide Web Consortium's site](https://www.w3.org/Style/CSS/members).
CSS, या कैस्केडिंग स्टाइल शीट्स, वेब विकास की एक महत्वपूर्ण समस्या को हल करते हैं: आपकी वेब साइट को कैसे अच्छा बनाया जाए। अपने ऐप्स को स्टाइल करना उन्हें अधिक उपयोगी और अच्छे दिखने वाला बनाता है; आप रिस्पॉन्सिव वेब डिज़ाइन (RWD) बनाने के लिए CSS का भी उपयोग कर सकते हैं - जिससे आपके ऐप्स को कोई फर्क नहीं पड़ता कि वे किस स्क्रीन के आकार को प्रदर्शित करते हैं। CSS केवल आपके ऐप को अच्छा बनाने के बारे में नहीं है; इसकी कल्पना में एनिमेशन और ट्रांसफ़ॉर्म शामिल हैं जो आपके ऐप्स के लिए परिष्कृत इंटरैक्शन सक्षम कर सकते हैं। सीएसएस वर्किंग ग्रुप वर्तमान सीएसएस विनिर्देशों को बनाए रखने में मदद करता है; आप [वर्ल्ड वाइड वेब कंसोर्टियम की साइट](https://www.w3.org/Style/CSS/members) पर उनके काम का अनुसरण कर सकते हैं।
> Note, CSS is a language that evolves, like everything on the web, and not all browsers support newer parts of the specification. Always check your implementations by consulting [CanIUse.com](https://caniuse.com).
> ध्यान दें, CSS एक ऐसी भाषा है जो वेब पर सब कुछ की तरह विकसित होती है, और सभी ब्राउज़र विनिर्देश के नए भागों का समर्थन नहीं करते हैं। हमेशा [CanIUse.com](https://caniuse.com) से परामर्श करके अपने कार्यान्वयन की जाँच करें।
In this lesson, we're going to add styles to our online terrarium and learn more about several CSS concepts: the cascade, inheritance, and the use of selectors, positioning, and using CSS to build layouts. In the process we will layout the terrarium and create the actual terrarium itself.
इस पाठ में, हम अपने ऑनलाइन टेरारियम में शैलियों को जोड़ने जा रहे हैं और कई सीएसएस अवधारणाओं के बारे में अधिक जान सकते हैं: कैस्केड, वंशानुक्रम, और चयनकर्ताओं, स्थिति और लेआउट का निर्माण करने के लिए सीएसएस का उपयोग करना। इस प्रक्रिया में हम टेरारियम लेआउट करेंगे और वास्तविक टेरारियम स्वयं बनाएंगे।
### Prerequisite
### शर्त
You should have the HTML for your terrarium built and ready to be styled.
आपके पास निर्मित और तैयार होने के लिए तैयार होने के लिए आपके पास HTML होना चाहिए।
### Task
### टास्क
In your terrarium folder, create a new file called `style.css`. Import that file in the `<head>` section:
अपने टेरारियम फ़ोल्डर में, `style.css` नामक एक नई फ़ाइल बनाएँ। उस फ़ाइल को `<head>` अनुभाग में आयात करें:
```html
<linkrel="stylesheet"href="./style.css"/>
@ -29,19 +29,19 @@ In your terrarium folder, create a new file called `style.css`. Import that file
---
## The Cascade
## कैस्केड
Cascading Style Sheets incorporate the idea that the styles 'cascade' such that the application of a style is guided by its priority. Styles set by a web site author take priority over those set by a browser. Styles set 'inline' take priority over those set in an external style sheet.
कैस्केडिंग स्टाइल शीट्स इस विचार को शामिल करती है कि शैली 'कैस्केड' ऐसी है कि शैली का अनुप्रयोग इसकी प्राथमिकता द्वारा निर्देशित होता है। एक वेब साइट लेखक द्वारा निर्धारित शैलियाँ एक ब्राउज़र द्वारा सेट किए गए लोगों पर प्राथमिकता देती हैं। स्टाइल्स सेट 'इनलाइन' बाहरी स्टाइल शीट में सेट पर प्राथमिकता लेते हैं।
### Task
### टास्क
Add the inline style "color: red" to your `<h1>` tag:
इनलाइन शैली "color:red" को अपने `<h1>` टैग में जोड़ें:
```HTML
<h1style="color: red">My Terrarium</h1>
```
Then, add the following code to your `style.css` file:
फिर, निम्न कोड को अपने `style.css` फ़ाइल में जोड़ें:
```CSS
h1 {
@ -49,17 +49,17 @@ h1 {
}
```
✅ Which color displays in your web app? Why? Can you find a way to override styles? When would you want to do this, or why not?
✅ आपके वेब ऐप में कौन सा रंग प्रदर्शित होता है? क्यों? क्या आप शैलियों को ओवरराइड करने का एक तरीका खोज सकते हैं? आप ऐसा कब करना चाहेंगे, या क्यों नहीं?
---
## Inheritance
## इनहेरिटेंस
Styles are inherited from an ancestor style to a descendent, such that nested elements inherit the styles of their parents.
पूर्वजों की शैली से वंशजों को वंश प्राप्त होता है, जैसे कि घोंसले वाले तत्व अपने माता-पिता की शैलियों को विरासत में देते हैं।
### Task
### टास्क
Set the body's font to a given font, and check to see a nested element's font:
शरीर के फ़ॉन्ट को दिए गए फ़ॉन्ट पर सेट करें, और नेस्टेड तत्व के फ़ॉन्ट को देखने के लिए जांचें:
```CSS
body {
@ -67,19 +67,19 @@ body {
}
```
Open your browser's console to the 'Elements' tab and observe the H1's font. It inherits its font from the body, as stated within the browser:
अपने ब्राउज़र के कंसोल को 'एलिमेंट्स' टैब में खोलें और H1 के फॉन्ट को देखें। यह शरीर से अपने फ़ॉन्ट को विरासत में प्राप्त करता है, जैसा कि ब्राउज़र के भीतर कहा गया है:
✅ Can you make a nested style inherit a different property?
✅ क्या आप एक नेस्टेड स्टाइल को एक अलग संपत्ति विरासत में दे सकते हैं?
---
## CSS Selectors
## CSS सिलेक्टोर
### Tags
### टैग्स
So far, your `style.css` file has only a few tags styled, and the app looks pretty strange:
अब तक, आपके `style.css` फ़ाइल में केवल कुछ टैग स्टाइल हैं, और एप्लिकेशन बहुत अजीब लग रहा है:
```CSS
body {
@ -92,11 +92,11 @@ h1 {
}
```
This way of styling a tag gives you control over unique elements, but you need to control the styles of many plants in your terrarium. To do that, you need to leverage CSS selectors.
एक टैग को स्टाइल करने का यह तरीका आपको अद्वितीय तत्वों पर नियंत्रण देता है, लेकिन आपको अपने टेरारियम में कई पौधों की शैलियों को नियंत्रित करने की आवश्यकता है। ऐसा करने के लिए, आपको CSS चयनकर्ताओं का लाभ उठाने की आवश्यकता है।
### Ids
### आइडी
Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
बाएँ और दाएँ कंटेनरों को लेआउट करने के लिए कुछ शैली जोड़ें। चूंकि केवल एक बाएं कंटेनर और केवल एक सही कंटेनर है, इसलिए उन्हें मार्कअप में आईडी दिए गए हैं। उन्हें स्टाइल करने के लिए, `#` का उपयोग करें:
```CSS
#left-container {
@ -120,19 +120,19 @@ Add some style to layout the left and right containers. Since there is only one
}
```
Here, you have placed these containers with absolute positioning to the far left and right of the screen, and used percentages for their width so that they can scale for small mobile screens.
यहां, आपने इन कंटेनरों को स्क्रीन के सबसे बाईं और दाईं ओर पूर्ण स्थिति में रखा है, और उनकी चौड़ाई के लिए प्रतिशत का उपयोग किया है ताकि वे छोटे मोबाइल स्क्रीन के लिए स्केल कर सकें।
✅ This code is quite repeated, thus not "DRY" (Don't Repeat Yourself); can you find a better way to style these ids, perhaps with an id and a class? You would need to change the markup and refactor the CSS:
✅ यह कोड काफी दोहराया जाता है, इस प्रकार "DRY" (Don't Repeat Yourself); क्या आप इन आईडी को स्टाइल करने का बेहतर तरीका ढूंढ सकते हैं, शायद आईडी और क्लास के साथ? आपको मार्कअप को बदलना होगा और CSS को रिफलेक्टर करना होगा:
```html
<divid="left-container"class="container"></div>
```
### Classes
### क्लाससेस
In the example above, you styled two unique elements on the screen. If you want styles to apply to many elements on the screen, you can use CSS classes. Do this to layout the plants in the left and right containers.
ऊपर के उदाहरण में, आपने स्क्रीन पर दो अद्वितीय तत्वों को स्टाइल किया है। यदि आप शैली को स्क्रीन पर कई तत्वों पर लागू करना चाहते हैं, तो आप CSS कक्षाओं का उपयोग कर सकते हैं। इसे बाएं और दाएं कंटेनर में पौधों को लेआउट करने के लिए करें।
Notice that each plant in the HTML markup has a combination of ids and classes. The ids here are used by the JavaScript that you will add later to manipulate the terrarium plant placement. The classes, however, give all the plants a given style.
ध्यान दें कि HTML मार्कअप में प्रत्येक संयंत्र में आईडी और कक्षाओं का एक संयोजन होता है। यहाँ आइडी का उपयोग JavaScript द्वारा किया जाता है जिसे आप बाद में जोड़कर टेरारियम प्लांट प्लेसमेंट में जोड़ देंगे। कक्षाएं, हालांकि, सभी पौधों को एक दी गई शैली देती हैं।
```html
<divclass="plant-holder">
@ -140,7 +140,7 @@ Notice that each plant in the HTML markup has a combination of ids and classes.
</div>
```
Add the following to your `style.css` file:
अपने `style.css` फ़ाइल में निम्न जोड़ें:
```CSS
.plant-holder {
@ -157,37 +157,37 @@ Add the following to your `style.css` file:
}
```
Notable in this snippet is the mixture of relative and absolute positioning, which we'll cover in the next section. Take a look at the way heights are handled by percentages:
इस स्निपेट में उल्लेखनीय सापेक्ष और पूर्ण स्थिति का मिश्रण है, जिसे हम अगले भाग में कवर करेंगे। एक नज़र जिस तरह से ऊंचाइयों को प्रतिशत द्वारा नियंत्रित किया जाता है:
You set the height of the plant holder to 13%, a good number to ensure that all the plants are displayed in each vertical container without need for scrolling.
आपने प्लांट धारक की ऊंचाई 13% तक निर्धारित की, यह सुनिश्चित करने के लिए एक अच्छी संख्या है कि सभी पौधों को प्रत्येक ऊर्ध्वाधर कंटेनर में स्क्रॉल करने की आवश्यकता के बिना प्रदर्शित किया जाता है।
You set the plant holder to move to the left to allow the plants to be more centered within their container. The images have a large amount of transparent background so as to make them more draggable, so need to be pushed to the left to fit better on the screen.
आपने संयंत्र धारक को बाईं ओर जाने के लिए सेट किया है ताकि पौधों को उनके कंटेनर के भीतर और अधिक केंद्रित होने दिया जा सके। चित्रों में बड़ी मात्रा में पारदर्शी पृष्ठभूमि होती है, ताकि उन्हें अधिक खींचने योग्य बनाया जा सके, इसलिए स्क्रीन पर बेहतर ढंग से फिट होने के लिए इसे बाईं ओर धकेलने की आवश्यकता होती है।
Then, the plant itself is given a max-width of 150%. This allows it to scale down as the browser scales down. Try resizing your browser; the plants stay in their containers but scale down to fit.
फिर, पौधे को अधिकतम 150% की चौड़ाई दी जाती है। यह इसे स्केल करने की अनुमति देता है क्योंकि ब्राउज़र नीचे स्केल करता है। अपने ब्राउज़र का आकार बदलने का प्रयास करें; पौधे अपने कंटेनरों में रहते हैं लेकिन फिट होने के लिए बड़े पैमाने पर होते हैं।
Also notable is the use of z-index, which controls the relative altitude of an element (so that the plants sit on top of the container and appear to sit inside the terrarium).
इसके अलावा उल्लेखनीय है जेड-इंडेक्स का उपयोग, जो किसी तत्व की सापेक्ष ऊंचाई को नियंत्रित करता है (ताकि पौधे कंटेनर के ऊपर बैठें और टेरारियम के अंदर बैठें)।
✅ Why do you need both a plant holder and a plant CSS selector?
✅ आपको संयंत्र धारक और संयंत्र CSS चयनकर्ता दोनों की आवश्यकता क्यों है?
## CSS Positioning
## सीएसएस पोजिशनिंग
Mixing position properties (there are static, relative, fixed, absolute, and sticky positions) can be a little tricky, but when done properly it gives you good control over the elements on your pages.
मिक्सिंग पोजीशन प्रॉपर्टीज (इसमें स्टैटिक, रिलेटिव, फिक्स्ड, एब्सोल्यूट और स्टिकी पोजिशंस होते हैं) थोड़ा मुश्किल हो सकता है, लेकिन जब ठीक से किया जाता है तो यह आपके पेजों पर मौजूद तत्वों पर अच्छा नियंत्रण देता है।
Absolute positioned elements are positioned relative to their nearest positioned ancestors, and if there are none, it is positioned according to the document body.
निरपेक्ष तैनात तत्व उनके निकटतम पूर्वजों के सापेक्ष तैनात हैं, और यदि कोई नहीं हैं, तो यह दस्तावेज़ निकाय के अनुसार स्थित है।
Relative positioned elements are positioned based on the CSS's directions to adjust its placement away from its initial position.
संबंधित स्थिति को उसके प्रारंभिक स्थान से दूर रखने के लिए सीएसएस के निर्देशों के आधार पर सापेक्ष तत्व तैनात किए जाते हैं।
In our sample, the `plant-holder` is a relative-positioned element that is positioned within an absolute-positioned container. The resultant behavior is that the side bar containers are pinned left and right, and the plant-holder is nested, adjusting itself within the side bars, giving space for the plants to be placed in a vertical row.
हमारे नमूने में, `plant-holder` एक रिश्तेदार-तैनात तत्व है जो एक निरपेक्ष-तैनात कंटेनर के भीतर तैनात है। परिणामी व्यवहार यह है कि साइड बार कंटेनरों को बाएं और दाएं पिन किया जाता है, और प्लांट धारक को नेस्टेड किया जाता है, साइड बार के भीतर खुद को समायोजित करते हुए, पौधों को ऊर्ध्वाधर पंक्ति में रखने के लिए जगह दी जाती है।
> The `plant` itself also has absolute positioning, necessary to making it draggable, as you will discover in the next lesson.
> `plant` में भी पूर्ण स्थिति होती है, जो आपको इसे खींचने योग्य बनाने के लिए आवश्यक है, जैसा कि आप अगले पाठ में जानेंगे।
✅ Experiment with switching the types of positioning of the side containers and the plant-holder. What happens?
✅ साइड कंटेनरों और प्लांट-धारक की स्थिति के प्रकारों को बदलने के साथ प्रयोग। क्या होता है?
## CSS Layouts
## CSS लेऔटस
Now you will use what you learned to build the terrarium itself, all using CSS!
अब आप सीएसएस का उपयोग करके टेरारियम का निर्माण करने के लिए जो कुछ भी सीखा है, उसका उपयोग करेंगे
First, style the `.terrarium` div children as a rounded rectangle using CSS:
पहले, CSS का उपयोग करके एक गोल आयत के रूप में `.terrarium` डिव बच्चों को स्टाइल करें:
```CSS
.jar-walls {
@ -236,30 +236,30 @@ First, style the `.terrarium` div children as a rounded rectangle using CSS:
}
```
Note the use of percentages here. If you scale your browser down, you can see how the jar scales as well. Also notice the widths and height percentages for the jar elements and how each element is absolutely positioned in the center, pinned to the bottom of the viewport.
यहां प्रतिशत के उपयोग पर ध्यान दें। यदि आप अपने ब्राउज़र को नीचे पैमाने पर रखते हैं, तो आप देख सकते हैं कि जार कैसे स्केल करता है। जार तत्वों के लिए चौड़ाई और ऊँचाई प्रतिशत को भी ध्यान में रखें और प्रत्येक तत्व को केंद्र में कैसे स्थित किया जाए, यह व्यूपोर्ट के तल पर पिन किया गया है।
We are also using `rem` for the border-radius, a font-relative length. Read more about this type of relative measurement in the [CSS spec](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
हम सीमा-त्रिज्या(रैडीअस), फ़ॉन्ट-सापेक्ष लंबाई के लिए `rem` का भी उपयोग कर रहे हैं। इस प्रकार के सापेक्ष माप के बारे में और अधिक पढ़ें [सीएसएस स्पेक्स] (https://www.w3.org/TR/css-values-3/#font-relative-lengths)।
✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why?
---
## 🚀Challenge
## 🚀चुनौती
Add a 'bubble' shine to the left bottom area of the jar to make it look more glasslike. You will be styling the `.jar-glossy-long` and `.jar-glossy-short` to look like a reflected shine. Here's how it would look:
जार के बाएँ निचले क्षेत्र में एक 'bubble' चमक जोड़ें, ताकि यह अधिक कांच जैसा दिखाई दे। आप एक प्रतिबिंबित चमक की तरह दिखने के लिए `.jar-glossy-long` और `.jar-glossy-short` को स्टाइल करेंगे। यहाँ है कि यह कैसा दिखेगा:
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
पोस्ट-लेक्चर क्विज को पूरा करने के लिए, इस लर्न मॉड्यूल से गुजरें: [CSS के साथ अपने HTML ऐप को स्टाइल करें](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?tT.mc_id=अकादमिक-13441-cxa)
CSS seems deceptively straightforward, but there are many challenges when trying to style an app perfectly for all browsers and all screen sizes. CSS-Grid and Flexbox are tools that have been developed to make the job a little more structured and more reliable. Learn about these tools by playing [Flexbox Froggy](https://flexboxfroggy.com/) and [Grid Garden](https://codepip.com/games/grid-garden/).
सीएसएस भ्रामक सीधा लगता है, लेकिन सभी ब्राउज़र और सभी स्क्रीन आकारों के लिए पूरी तरह से ऐप को स्टाइल करने की कोशिश करते समय कई चुनौतियां हैं। सीएसएस-ग्रिड और फ्लेक्सबॉक्स ऐसे उपकरण हैं जिन्हें काम को थोड़ा अधिक संरचित और अधिक विश्वसनीय बनाने के लिए विकसित किया गया है। [Flexbox Froggy](https://flexboxfroggy.com/) और [ग्रिड गार्डन](https://codepip.com/games/grid-garden/) खेलकर इन उपकरणों के बारे में जानें।
Sanjay
4 years ago