CSS में Style Properties (Background, Colors, Text, Fonts, Borders, Box Model, Positioning) in Hindi

परिचय

CSS (Cascading Style Sheets) वेब पेज को स्टाइल करने के लिए उपयोग की जाती है। CSS में विभिन्न Style Properties होती हैं, जो वेब पेज के डिज़ाइन को नियंत्रित करती हैं। इस लेख में हम Background, Colors, Text Manipulation, Fonts, Borders, Box Model, Margins, Padding, Lists और Positioning की विशेषताओं को विस्तार से समझेंगे।

1. CSS Background Properties (बैकग्राउंड से संबंधित प्रॉपर्टीज)

CSS का उपयोग वेब पेज के बैकग्राउंड को स्टाइल करने के लिए किया जाता है।

मुख्य Background Properties

Property	विवरण	उदाहरण
background-color	बैकग्राउंड का रंग सेट करता है।	`background-color: yellow;`
background-image	बैकग्राउंड में इमेज जोड़ता है।	`background-image: url("image.jpg");`
background-repeat	इमेज को दोहराने (repeat) या नहीं करने का विकल्प देता है।	`background-repeat: no-repeat;`
background-size	इमेज का साइज़ सेट करता है।	`background-size: cover;`
background-position	इमेज की पोज़ीशन सेट करता है।	`background-position: center;`

Background Example:


body {
    background-color: lightblue;
    background-image: url("background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

2. CSS Colors (रंगों से संबंधित प्रॉपर्टीज)

CSS में रंगों को विभिन्न तरीकों से परिभाषित किया जाता है:

रंग का नाम (Color Name): color: red;
HEX कोड: color: #ff0000;
RGB वैल्यू: color: rgb(255, 0, 0);
HSL वैल्यू: color: hsl(0, 100%, 50%);

Color Example:


h1 {
    color: blue;
    background-color: yellow;
}

3. CSS Text Properties (टेक्स्ट से संबंधित प्रॉपर्टीज)

CSS टेक्स्ट को स्टाइल करने की सुविधा देता है।

Property	विवरण	उदाहरण
text-align	टेक्स्ट को लेफ्ट, राइट, सेंटर या जस्टिफाई करता है।	`text-align: center;`
text-transform	टेक्स्ट को अपरकेस, लोअरकेस या कैपिटलाइज़ करता है।	`text-transform: uppercase;`
letter-spacing	अक्षरों के बीच स्पेसिंग सेट करता है।	`letter-spacing: 2px;`
word-spacing	शब्दों के बीच स्पेसिंग सेट करता है।	`word-spacing: 5px;`

Text Example:


p {
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 1px;
}

4. CSS Fonts (फॉन्ट्स से संबंधित प्रॉपर्टीज)

CSS में विभिन्न प्रकार के फॉन्ट सेट किए जा सकते हैं।

Property	विवरण	उदाहरण
font-family	फॉन्ट सेट करता है।	`font-family: Arial, sans-serif;`
font-size	फॉन्ट का आकार सेट करता है।	`font-size: 20px;`
font-weight	फॉन्ट को बोल्ड या नॉर्मल बनाता है।	`font-weight: bold;`
font-style	इटैलिक या नॉर्मल बनाता है।	`font-style: italic;`

5. CSS Borders और Box Model

CSS में बॉर्डर, मार्जिन और पैडिंग को नियंत्रित करने के लिए Box Model का उपयोग किया जाता है।

Box Model Example:


div {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    padding: 10px;
    margin: 20px;
}

6. CSS Positioning (स्थिति निर्धारण)

CSS में विभिन्न पोज़ीशन प्रॉपर्टीज होती हैं:

static: डिफ़ॉल्ट पोज़ीशन।
relative: वर्तमान स्थिति से ऊपर-नीचे या दाएं-बाएं मूव करता है।
absolute: पेज में कहीं भी सेट किया जा सकता है।
fixed: स्क्रीन पर फिक्स रहता है।
sticky: जब तक जरूरत न हो, तब तक जगह पर रहता है।

Position Example:


div {
    position: absolute;
    top: 50px;
    left: 100px;
}

निष्कर्ष

CSS की विभिन्न Style Properties वेब पेज को आकर्षक और यूज़र फ्रेंडली बनाने में मदद करती हैं। Background, Colors, Text, Fonts, Borders, Box Model, Margins, Padding, Lists, और Positioning का सही उपयोग वेबसाइट की परफॉर्मेंस और डिज़ाइन को बेहतर बनाता है।