सीएसएस फ़ाइल क्या है?

CSS (कैस्केडिंग स्टाइल शीट्स) ऐसी फाइलें हैं जो बताती हैं कि स्क्रीन, पेपर आदि पर HTML तत्वों को कैसे प्रदर्शित किया जाता है। HTML के साथ, आपके पास या तो एम्बेडेड शैलियाँ हो सकती हैं या शैलियों को बाहरी स्टाइलशीट में परिभाषित किया जा सकता है। शैलियों को एम्बेड करने के लिए, \ </style> टैग का प्रयोग किया जाता है। बाहरी स्टाइलशीट को .css एक्सटेंशन वाली फाइलों में संग्रहित किया जाता है। बाहरी CSS के साथ, आप उन पेजों की शैली को अपडेट करने के लिए इसे कई HTML पेजों पर शामिल कर सकते हैं। एक पूरी वेबसाइट को स्टाइल करने के लिए एक CSS फ़ाइल का भी उपयोग किया जा सकता है।

संक्षिप्त इतिहास

CSS1 को 1996 में बर्ट बोस के साथ सह-लेखक के रूप में रिलीज़ किया गया था। सीएसएस वर्किंग ग्रुप ने उन मुद्दों पर काम करना शुरू किया जिन्हें CSS1 में संबोधित नहीं किया गया था। इसके परिणामस्वरूप नवंबर 1997 में CSS2 का निर्माण हुआ जिसे 12 मई 1998 को W3C अनुशंसा के रूप में प्रकाशित किया गया था। इस संस्करण में मीडिया-विशिष्ट उपकरणों जैसे प्रिंटर, डाउनलोड करने योग्य फ़ॉन्ट, टेबल और तत्व स्थिति के लिए समर्थन जोड़ा गया। जून 1999 में, CSS3 W3C की सिफारिश बन गई। इसने प्रलेखन को मॉड्यूल में विभाजित किया जहां प्रत्येक मॉड्यूल में CSS2 में परिभाषित विस्तार सुविधाएँ थीं।

सीएसएस फाइलों का उपयोग कैसे करें

CSS फ़ाइल का उपयोग करने के लिए, आप इसे HTML दस्तावेज़ के मुख्य भाग में शामिल करते हैं। फ़ाइल को शामिल करने के लिए आप लिंक टैग का उपयोग करते हैं, जैसा कि नीचे दिखाया गया है।

<link rel="stylesheet" type="text/css" href="main.css"/>

लिंक टैग की href विशेषता में CSS फ़ाइल का पथ शामिल है। ऐसा करने से, शामिल CSS फ़ाइल में निहित लागू शैलियाँ HTML दस्तावेज़ पर लागू होती हैं।

सीएसएस सिंटेक्स

CSS नियम में दो घटक होते हैं, एक चयनकर्ता और एक घोषणा। एक चयनकर्ता HTML दस्तावेज़ में एक तत्व को इंगित करता है। यह या तो एक तत्व टैग, वर्ग का नाम, आईडी का नाम, पदानुक्रम दिखाने वाले कई टैग आदि हो सकते हैं। एक घोषणा में शैली की परिभाषा होती है जिसमें संपत्ति और मूल्य शामिल होते हैं। संपत्ति उस तत्व की संपत्ति की पहचान करती है जिसे आप बदलना चाहते हैं और मूल्य उसके नए मूल्य को परिभाषित करता है। प्रत्येक सीएसएस नियम में कई घोषणाएँ हो सकती हैं। निम्नलिखित CSS नियम का एक उदाहरण है।

h1{
    font-weight: 700;
    color: forestgreen;
}

उपरोक्त उदाहरण में, हमारे पास एक चयनकर्ता के रूप में h1 है जो HTML दस्तावेज़ में सभी h1 टैग का चयन करता है। नियम में दो घोषणाएँ हैं, एक फॉन्ट-वेट के लिए और दूसरी रंग के लिए। फ़ॉन्ट-वेट और रंग प्रॉपर्टी हैं और 700 और फ़ॉरेस्टग्रीन क्रमशः उनकी वैल्यू हैं.

सीएसएस उपयोग उदाहरण

निम्नलिखित उदाहरण HTML दस्तावेज़ और इसे स्टाइल करने के लिए उपयोग की जाने वाली स्टाइलशीट दिखाता है। स्टाइल और सादे HTML दस्तावेज़ों की तुलना करने के लिए तुलना छवि भी जोड़ी गई है

HTML दस्तावेज़ 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" type="text/css">
    <title>CSS Test</title>
</head>

<body>
    <div class="content-wrapper">
        <h1>Test document to test <span class="highlight">CSS</span></h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
            tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
            perferendis
            sed aut!</p>

        <h2>List of items</h2>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>
</body>

</html>

सीएसएस स्टाइलशीट 

body{
    background-color: lightblue;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
    padding: 10px 30px;
}
p{
    text-align: justify;
}
h1{
    text-align: center;
}
.highlight{
    font-weight: 700;
    color: forestgreen;
}
h1, h2{
    font-weight: 400;
}

ul li{
    list-style-type: square;
    margin-bottom: 10px;
    margin-left: 50px;
}

आउटपुट तुलना

छवि के बाईं ओर लागू शैलियों के बिना HTML दस्तावेज़ प्रदर्शित करता है और दाईं ओर लागू शैलियों के साथ HTML दस्तावेज़ प्रदर्शित करता है।

उदाहरण छवि

संदर्भ

See Also