Introduction to CSS
A CSS (सीएसएस) file allows you to separate your web sites(X) HTML content from its style. As always you use your (X) HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS. At this point you have some choices of how to use the CSS, (सीएसएस) either internally or externally:
कैस्केडिंग स्टाइल शीट या संक्षिप्त में सीएसएस एक प्रकार का डीएचटीएमएल कंपोनेंट होता है जो किसी वेब पेज में कंटेंट्स जैसे टेक्स्ट, इमेजेज, ग्राफिक्स, टेबल्स इत्यादि को फॉर्मेट एवं अलाइन (व्यवस्थापन) करने के काम में आती है। सीएसएस के भी अपने कुछ क्लासेज एवं एलीमेंट्स होते हैं जिन्हें प्रयोग कर हम किसी वेब पेज को डायनामिक बनाते हैं। यहां हम सीएसएस को कैसे इंटर्नली या एक्सटर्नली यूज करेंगे इसके बारे में जानेंगे ।
In other words we can say that it is the first technology you should start learning after HTML. It is used to format the layout’s of web pages in the website. By using this we can define the text styles, table sizes and other aspects of Web pages that previously could only be defined in a HTML pages. While HTML (एचटीएमएल) is used to define the structure and semantics of your content. CSS (सीएसएस) describes how HTML elements are to be displayed on screen, paper or in other media.
दूसरे शब्दों मे हम यह कह सकते है कि यह ऐसी पहली टेक्नोलॉजी है जिसे आप HTML के बाद सीखना प्रारम्भ करते हैं। इसका प्रयोग वेबसाइट में वेब पेजों के लेआउट को फॉर्मेट करने के लिए किया जाता है। इसका प्रयोग करके हम टेक्स्ट स्टाईल, टेबल साइज और वेब पेजों के अन्य पहलुओं को परिभाषित कर सकते हैं जो पहले केवल एक HTML पेजों में परिभाषित किए जाते थे। जबकि HTML आपके कंटेट के स्ट्रक्चर आदि को डिफाईन करने के लिए प्रयोग किया जाता है। CSS यह बताता है कि HTML एलिमेन्टो को स्क्रीन, पेपर या अन्य मीडिया में कैसे प्रदर्शित किया जाना है।
Before starting CSS, we have to know the purpose. HTML (एचटीएमएल) was never intended to contain tags for formatting a web page. HTML was created to describe the content of a web page, like headings or paragraph etc.
CSS प्रारम्भ करने से पहले हमें इसके उद्देश्य को जान लेना चाहिए। HTML मे वेब पेजों के फार्मेटिंग के लिए टैग्स को शामिल नहीं किया गया था। इसे केवल वेब पेज के कंटेंट को डिस्क्राइब करने के लिए इसे क्रिएट किया गया था जैसे हेडिंग या पैराग्राफ आदि।
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Before CSS, If we want to assign a typographic characteristics to say, all H2 headings had to repeat HTML representational markup for each occurrence of that heading type. This made documents more complex, larger, more error-prone and is difficult to maintain.
CSS से पहले, यदि हम यह कहने के लिए एक टाइपोग्राफिक विशेषताओं को निर्दिष्ट करना चाहते हैं, तो सभी H2 हेडिंग्स को उस शीर्षक प्रकार की प्रत्येक घटना के लिए HTML प्रेजेंटेशनल मार्कअप दोहराना था। इसने डॉक्यूमेंटों को अधिक जटिल, बड़ा, अधिक एरर-प्रोन बना दिया और इसे बनाए रखना मुश्किल है ।
To solve this problem, the World Wide Web Consortium (W3C) created CSS (सीएसएस). It removed the style formatting from the HTML page! It also Saves a Lot of Work and Time! The style definitions are normally saved in external .css (सीएसएस) files. With an external CSS file, you can change the look of an entire website by changing just one file at a time.
इस प्राब्लम को सॉल्व करने के लिए, वर्ल्ड वाइड वेब कॉन्सोर्शियम ने सीएसएस बनाया। यह एचटीएमएल पेजों से स्टाइल फार्मेटिंग को रिमूव कर दिया। जिससे हम अपने वर्क एंड टाइम को बचा सकते है। सभी स्टाइल डेफिनेसन को हम एक्सटर्नल डॉट सीएसएस फाइल मे सेव करते है। आप इस एक्सटर्नल डॉट सीएसएस फाइल से अपने वेबसाइट के लूक को आसानी से एक ही बार में एक ही फाइल से मैनेज कर सकते है ।
CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics and can do so independently for on-screen and printed views. CSS (सीएसएस) also defines non-visual styles, such as reading speed.
CSS structure से प्रेजन्टेशन को अलग करने की अनुमति देता है। CSS रंग, फ़ॉन्ट, टेक्स्ट एलाइनमेंट, साइज, बार्डर, . स्पेसिंग, लेआउट और कई अन्य टाइपोग्राफिक विशेषताओं को डिफाइन कर सकता है और ऑन-स्क्रीन और प्रिन्टेड व्यू के लिए स्वतंत्र रूप से ऐसा कर सकता है। CSS नॉन-विजुअल स्टाइल को भी डिफाइन करता है, जैसे पढ़ने की गति।
Example 1: If you want to create a heading element with green text using HTML code would be written as:
एचटीएमएल कोड द्वारा हेडिंग एलिमेंट के टेक्स्ट को ग्रीन कलर करना चाहते है तो यह इस प्रकार लिखा जाएगाः
<h2><font color=”green”> Welcome to Gyancs Student Help </font></h2>
Example 2: If you want create the same heading element with green text and having css style then the CSS code is written as:
यदि आप उसी हेडिंग एलिमेंट के टेक्स्ट को सीएसएस यूज कर ग्रीन कलर करना चाहते है तो नीचे लिखे सीएसएस कोड को लिखेः
<style>
h2 {
color: green;
}
</style>
Now, All h2 elements in the document will then automatically become green without requiring any explicit code. But if you later wanted to make h2 elements red instead, then this could be done by changing the style element rather than with difficulty going through the web document and changing the color for each individual h2 element.
अब डाक्यूमेंट मे बिना किसी दूसरे कोड के सभी h2 एलिमेंट अपने आप ग्रीन कलर में हो जाएंगे। अगर आप बाद मे h2 एलिमेंट को ग्रीन कलर की जगह रेड करना चाहते है तो आप सिर्फ सीएसएस फाइल (स्टाइल एलिमेंट) मे जाकर h2 हेडिंग का कलर रेड सेट कर सकते है जिससे सभी h2 हेडिंग के कलर रेड हो जाएंगे जैसा की यहां दिखाया गया है:
<style>
h2 {color: red; }
</style>
Types of CSS – सीएसएस के प्रकार
About me
