Introduction To CSS

M2-R5.1 · Chapter 4: CSS · 4 min read

CSS का परिचय (Introduction to CSS)

CSS क्या है?

  • CSS का पूरा नाम Cascading Style Sheets है।

  • CSS का उपयोग Webpage के Layout और Design को Format करने के लिए किया जाता है।

  • CSS, HTML और अन्य Markup Languages के साथ काम करता है और यह निर्धारित करता है कि Webpage का Content किस प्रकार दिखाई देगा।

  • CSS, World Wide Web Consortium (W3C) की एक Recommendation है।

  • CSS एक Stylesheet Language है, जिसका उपयोग Markup Language में लिखे गए Webpage की Presentation और Appearance को निर्धारित करने के लिए किया जाता है।

CSS की सहायता से हम निम्न चीजों को नियंत्रित कर सकते हैं:

  • Text का Color

  • Paragraph के बीच का Spacing

  • Font की Style और Size

  • Webpage का Background Color

  • Background में Image

CSS का मूल विचार

CSS की अवधारणा बहुत सरल है।

सबसे पहले Designer एक सामान्य HTML Webpage बनाता है। इसके बाद CSS का उपयोग करके उस Webpage के लिए Style Rules बनाए जाते हैं।

उदाहरण के लिए:

  • सभी Headings का Color Red हो।

  • सभी Paragraphs का Color Blue हो।

इस प्रकार CSS HTML Content के Look और Presentation को नियंत्रित करता है।

CSS के लाभ (Advantages of CSS)

CSS के प्रमुख लाभ निम्नलिखित हैं:

  1. Easy to Manage – Webpage की Styling को आसानी से Manage किया जा सकता है।

  2. Saves Time – बार-बार अलग-अलग HTML Elements में Style लिखने की आवश्यकता नहीं होती।

  3. Easy to Maintain and Update – Styling को आसानी से Maintain और Update किया जा सकता है।

  4. Pages Load Faster – CSS के उपयोग से Webpages को अधिक Efficient तरीके से Load किया जा सकता है।

CSS का उदाहरण

<html>

<head>
    <title>CSS</title>

    <style>
        p {
            color: blue;
        }

        h1 {
            color: red;
        }
    </style>

</head>

<body>

    <p>This is my first paragraph</p>

    <h1>This is my first heading</h1>

    <b>I am not affected by CSS</b>

</body>

</html>

उदाहरण की व्याख्या

ऊपर दिए गए उदाहरण में:

  • h1 और p को Selectors कहा जाता है।

  • color एक Property है।

  • red और blue उस Property के Values हैं।

अर्थात:

h1 {
    color: red;
}

यहाँ:

  • h1 → Selector

  • color → Property

  • red → Value

CSS Comments

CSS में Comments लिखने के लिए निम्न Syntax का उपयोग किया जाता है:

/* This is a comment */

उदाहरण:

/* यह Paragraph का Color निर्धारित करता है */
p {
    color: blue;
}

Note: CSS Comment Browser द्वारा दिखाई नहीं जाता। इसका उपयोग Code को समझाने या जानकारी देने के लिए किया जाता है।

CSS का Syntax

CSS का Basic Syntax निम्न प्रकार होता है:

Selector {
    Property: Value;
}

उदाहरण:

table {
    border: 2px solid red;
}

h1 {
    color: red;
}

CSS Syntax के मुख्य भाग

1. Selector

Selector उस HTML Element को दर्शाता है जिसे हम Style करना चाहते हैं।

उदाहरण:

h1 {
    color: red;
}

यहाँ h1 Selector है।

2. Property

Property उस विशेष Attribute को दर्शाती है जिसे हम बदलना चाहते हैं।

उदाहरण:

h1 {
    color: red;
}

यहाँ color Property है।

3. Value

Value वह मान है जो किसी Property को दिया जाता है।

उदाहरण:

h1 {
    color: red;
}

यहाँ red Value है।

4. Declaration

Property और Value का पूरा संयोजन Declaration कहलाता है।

उदाहरण:

color: red;

यह एक Declaration है।

CSS के प्रकार (Types of CSS)

CSS मुख्य रूप से तीन प्रकार की होती है:

  1. Inline CSS

  2. Internal CSS

  3. External CSS

1. Inline CSS

  • Inline CSS का उपयोग किसी Specific HTML Element को Style करने के लिए किया जाता है।

  • इसमें CSS को सीधे HTML Element के style attribute में लिखा जाता है।

  • इसका उपयोग तब किया जाता है जब किसी Element पर विशेष Style केवल एक बार लागू करनी हो।

उदाहरण:

<html>

<head>
    <title>Inline CSS</title>
</head>

<body>

    <h1 style="color: green;">Heading</h1>

    <p style="color: blue; font-size: 40px;">
        This is my first paragraph
    </p>

</body>

</html>

उदाहरण की व्याख्या

<h1 style="color: green;">Heading</h1>

यहाँ style attribute के अंदर CSS लिखी गई है। इसलिए यह Inline CSS है।

2. Internal CSS

  • Internal CSS को HTML Document के <head> Section में मौजूद <style> Element के अंदर लिखा जाता है।

  • इसका उपयोग सामान्यतः तब किया जाता है जब किसी एक HTML Page पर CSS लागू करनी हो।

उदाहरण:

<html>

<head>

    <title>Internal CSS</title>

    <style>
        h1 {
            color: red;
        }
    </style>

</head>

<body>

    <h1>Heading</h1>

</body>

</html>

उदाहरण की व्याख्या

ऊपर दिए गए उदाहरण में CSS को:

<style>
    h1 {
        color: red;
    }
</style>

के अंदर लिखा गया है और यह <head> Section में मौजूद है। इसलिए इसे Internal CSS कहा जाता है।

3. External CSS

  • External CSS को एक अलग .css file में लिखा जाता है।

  • एक External CSS File को Multiple HTML Files के साथ इस्तेमाल किया जा सकता है।

  • CSS File का Extension .css होना आवश्यक है।

  • External CSS को HTML Page से जोड़ने के लिए <link> Tag का उपयोग किया जाता है।

उदाहरण:

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

यहाँ:

  • rel="stylesheet" → बताता है कि Linked File एक Stylesheet है।

  • type="text/css" → File के Type को दर्शाता है।

  • href="style.css" → External CSS File का Path/Name बताता है।

External CSS File का उदाहरण

style.css

h1 {
    color: red;
}

p {
    color: blue;
}

इसके बाद इस CSS File को HTML Page में Link किया जाता है:

<html>

<head>

    <title>External CSS</title>

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

</head>

<body>

    <h1>Heading</h1>
    <p>This is my paragraph.</p>

</body>

</html>

इस प्रकार एक ही CSS File को कई HTML Pages में इस्तेमाल किया जा सकता है।