Types of CSS

Types of CSS
There are three different ways you can use CSS in your web page. These are as follows:
आपके वेब पेज में सीएसएस का उपयोग करने के तीन अलग-अलग तरीके हैं। ये इस प्रकार हैं:
1. Inline (Right next to the text it decorates):
इनलाइन (इसे सजाने वाले टेक्स्ट के ठीक बगल में)
It helps you to apply unique style rules in specific HTML elements. The style attribute specifies properties and values. Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML (एचटीएमएल) code, giving you real freedom to specify each web page element. To use inline styles, (स्टाइल) add the style attribute to the relevant element. The style attribute can contain any CS$ property.
यह HTML एलीमेंट को निर्दिष्ट करने में यूनिक स्टाईल नियम लागू करने में आपकी सहायता करता है। स्टाईल एट्रीब्यूट प्रॉपर्टीज और मूल्यों को निर्दिष्ट करती है। इनलाइन स्टाइलों को ठीक उसी स्थान पर रखा जाता है जहाँ आपको उनकी आवश्यकता होती है, जिस टेक्स्ट या ग्राफ़िक को आप सजाने की इच्छा रखते हैं। आप अपने HTML कोड के बीच में कहीं भी इनलाइन स्टाइलो को सम्मिलित कर सकते हैं, जिससे आपको प्रत्येक वेब पेज एलिमेंट को स्पेशिफाई करने की वास्तविक स्वतंत्रता मिलती है। इनलाइन स्टाईल का उपयोग करने के लिए, संबंधित एलिमेंट में स्टाईल ऐट्रीब्यूट को जोड़ें। स्टाईल एट्रीब्यूट में कोई भी सीएसएस गुण हो सकते हैं।
The example (एक्स्जाम्प्ल) below shows how to change the color and the left margin of a <h1> element:
नीचे दिए गए उदाहरण से पता चलता है कि रंग और <h1> एलीमेंट के बाएं मार्जिन को कैसे बदलना है:
<! DOCTYPE html>
<html>
<body>
<h1 style=”color:green”> This is heading </h1>
<p style=”color:blue”> This is Paragraph </p>
</body>
<html>
2. Internal (At the top of a web page document)
इंटर्नल (एक वेब पेज डॉक्यूमेंट के शीर्ष पर)
Internal styles are located at the top of each web page, before any of the content is listed. This is the next best thing to external, because they’re easy to find, yet permit you to ‘override’ an external style sheet – for that special page that wants to be an individualist. Internal styles are defined within the <style> element, inside the <head> section of an HTML page like:
इंटर्नल स्टाइल प्रत्येक वेब पेज के शीर्ष पर स्थित होती है, इससे पहले कि कोई भी कन्टेंट सूचीबद्ध हो। यह एक्सटर्नल के लिए अगली सबसे अच्छी बात है, क्योंकि इन्हें खोजना आसान है, फिर भी आपको बाहरी स्टाईल शीट को ‘ओवरराइड’ करने की अनुमति है- उस विशेष पेज के लिए जो एक इंडिविजुअल बनना चाहता है। इंटर्नल स्टाईल को <style> एलिमेन्ट के भीतर डिफाईन किया गया है, जैसे HTML पेज के <head> सेक्शन के अंदरः
Run the program and it looks like in the browser: प्रोग्राम को चलाएं और यह ब्राउजर में जैसा दिखता है:
3. External (In a separate file)
एक्सटर्नल (एक अलग फ़ाइल में)
An external CSS (सीएसएस) file can be created with any text or HTML editor such as “Notepad”, “Notepad++” or “Dreamweaver”. A CSS (सीएसएस) file contains no (X) HTML, only CSS. You simply save it with the .css (सीएसएस) file extension. You can link (लिंक) to the file externally by placing one of the following links in the head section of every (X) HTML file you want to style with the CSS file.
एक एक्सटर्नल सीएसएस फाइल किसी भी टेक्स्ट या एचटीएमएल एडीटर जैसे “नोटपैड”, “नोटपैड++” या “ड्रीमविवर” के साथ बनाई जा सकती है। एक सीएसएस फाइल में कोई (X) एचटीएमएल नहीं है, केवल सीएसएस है। आप बस .css फाइल एक्सटेंशन के साथ इसे सेव कर सकते हैं। आप प्रत्येक (X) एचटीएमएल फाइल के सीएसएस अनुभाग में निम्नलिखित लिंक में से एक को बाहरी फाइल में लिंक कर सकते हैं, जिसे आप सीएसएस फाइल के साथ स्टाईल करना चाहते हैं।
For example: An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a *.css (सीएसएस) extension.
किसी भी टेक्स्ट एडिटर में एक बाहरी स्टाइल शीट लिखी जा सकती है। फ़ाइल में कोई HTML टैग नहीं होना चाहिए। स्टाइल शीट फ़ाइल को एक .css एक्सटेंशन के साथ save किया जाना चाहिए।
Step 1: Open Notepad++ application and type the following lines.
Notepad++ एप्लिकेशन खोलें और नीचे लिखें लाईन को टाइप करें।
Body {
Background-color:lightblue;
}
h1 {
   color: navy;
  margin-left: 20px;
}
Note: Do not add a space (स्पेस) between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;
प्रॉपर्टी वैल्यू और यूनिट (जैसे मार्जिन-लेफ्ट: 20 px;) के बीच स्पेस न जोड़ें। सही तरीका है: मार्जिन-लेफ्ट: 20px;
Step 2: Save this file with the name of “myFirstStyleSheet.css”
इस फ़ाइल को “myFirstStyleSheet.css” के नाम से सेव करें
Step 3: Open Notepad++ application write HTML document. Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section.
Notepad++ एप्लिकेशन खोलें HTML डॉक्यूमेंट लिखे। प्रत्येक पृष्ठ में <link> एलिमेंट के अंदर बाहरी स्टाइल शीट फ़ाइल का रेफरेन्स शामिल होना चाहिए। <link> एलिमेंट <head> सेक्शन के अंदर होता है:
Step 4: Save the file with name of “myFirstCSS.html” where myFirstStyleSheet.css file is stored.
फाइल को myFirstCSS.html के नाम से सेव करें जहाँ myFirstStyleSheet.css फ़ाइल स्टोर है।
Step 5: Open any browser and open myFirstCss.html.
किसी भी ब्राउज़र को खोलें और myFirstCss.html खोलें.
Introduction to CSS
About me