Cascading Style Sheet (CSS)

Paper 2-Internet &Web design

Unit I
Unit II
Unit III
Unit IV
Unit V

Back
Internet-Unit-3
Next

Cascading Style Sheet (CSS)

CSS का पूरा नाम Cascading Style Sheet है। Web Page बनाने में HTML और CSS दोनों की महत्वपूर्ण भूमिका होती है। HTML वेब पेज की संरचना (Structure) तैयार करता है, जबकि CSS वेब पेज को आकर्षक रूप और डिजाइन प्रदान करता है। सामान्यतः HTML और CSS का उपयोग साथ-साथ किया जाता है।

CSS एक सरल Design Language है, जिसे Web Pages की प्रस्तुति (Presentation) को आसान बनाने के लिए विकसित किया गया है। इसके माध्यम से Web Page के Layout, Background, Text Color, Font Style, Spacing आदि को नियंत्रित किया जा सकता है। CSS की सहायता से Web Pages को अधिक आकर्षक, व्यवस्थित और Professional बनाया जा सकता है।

CSS का इतिहास

CSS का विकास 10 अक्टूबर 1994 को Håkon Wium Lie द्वारा किया गया था। CSS को Maintain और Update करने के लिए World Wide Web Consortium के अंतर्गत CSS Working Group बनाया गया, जो CSS के Standards और Specifications तैयार करता है।

CSS के प्रकार

CSS को मुख्य रूप से तीन प्रकार से उपयोग किया जाता है —

  1. Inline Style Sheet
  2. Internal (Embedded) Style Sheet
  3. External Style Sheet

1. Inline Style Sheet

Inline CSS का उपयोग किसी विशेष HTML Element पर Style लागू करने के लिए किया जाता है। इसमें style Attribute सीधे HTML Tag के अंदर लिखा जाता है। इसका प्रभाव केवल उसी Element पर पड़ता है।

उदाहरण

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

2. Internal (Embedded) Style Sheet

Internal CSS को HTML Document के <head> Section के अंदर <style> Tag में लिखा जाता है। इस प्रकार की Style Sheet का प्रभाव पूरे Web Page पर पड़ता है।

उदाहरण

<!DOCTYPE html>
      <html>
         <head>
            <style>
               body {
                    background-color: powderblue;
                    }
               h1 {
                    color: blue;
                  }
              p {
                   color: red;
               }
            </style>
        </head>
        <body>
             <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </body>
    </html>

3. External Style Sheet

External CSS में CSS Code को अलग .css File में लिखा जाता है। बाद में उस File को HTML Document से <link> Tag द्वारा जोड़ा जाता है। इसका उपयोग विशेष रूप से बड़ी Websites में किया जाता है, जहाँ एक ही CSS File से कई Web Pages का Design नियंत्रित किया जा सकता है।

HTML File

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="styles.css">
       </head>
       <body>
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
       </body>
</html>

CSS File (styles.css)

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS के फायदे (Benefits of CSS)

1. समय की बचत

CSS में एक बार Style लिखने के बाद उसे कई HTML Elements तथा अनेक Web Pages पर पुनः उपयोग किया जा सकता है। इससे समय की बचत होती है।

2. Page Load Time कम करता है

CSS के उपयोग से Web Page में कम Code लिखना पड़ता है, जिससे Page तेजी से Load होता है।

3. Maintain करना आसान

CSS की सहायता से किसी Website के कई Pages का Design एक ही स्थान से नियंत्रित और Update किया जा सकता है।

4. Bandwidth की बचत

Table आधारित Layout की तुलना में CSS आधारित Design हल्का होता है, जिससे File Size कम होती है और Bandwidth की बचत होती है।

5. Multiple Devices के लिए उपयुक्त

CSS की सहायता से एक ही Web Page को विभिन्न Devices जैसे — Computer, Mobile Phone, Tablet, Printer आदि के अनुकूल (Responsive) बनाया जा सकता है।

6. Search Engine Ranking में सुधार

CSS के उपयोग से Website का Structure अधिक व्यवस्थित हो जाता है, जिससे Search Engines के लिए Website को Crawl और Index करना आसान हो जाता है। इससे Search Engine Ranking बेहतर हो सकती है।

Back
Next
error: Content is protected !!