CSS Syntax: Selectors, Properties, Values In Hindi
सीएसएस में आपको मल्टीप्ल वेब पेज ऑब्जेक्ट कंटेंट सलेक्टर्स चॉइस मिलते है, जहा इन सीएसएस सलेक्टर्स ऐट्रिब्यूट्स का उपयोग एचटीएमएल वेबपेज वेबसाइट ग्रुप ऑब्जेक्ट या इंडिविजुअल वेब पेज ऑब्जेक्ट टेक्स्ट कंटेंट टैग एलिमेंट को सलेक्ट करने और उन पर कई प्रकार के सीएसएस स्टाइलशीट सलेक्टर्स इफ़ेक्ट और ऐट्रिब्यूट्स को अप्लाई किया जाता है। सीएसएस स्टाइल्सशीट ऐट्रिब्यूट्स आपके मौजूदा एचटीएमएल वेबपेज ऑब्जेक्ट स्ट्रक्चर और लेआउट को मॉडिफाई और रेस्पॉन्सिव करते है।
So let’s know the existing multiple selectors attributes in CSS.
Basic CSS syntax structure.
type of selector {
object property: object value;
}
CSS selectors.
सीएसएस में उपयोग सलेक्टर्स को मौजूदा वेब पेज या वेबसाइट के सिंगल और ग्रुप एलिमेंट को सलेक्ट कर ऐट्रिब्यूट्स अप्लाई करते हैं, सीएसएस सलेक्टर्स से आप पर्टिकुलर एचटीएमएल वेब पेज एलिमेंट को स्टाइल कर सकते है।
So let’s understand some common CSS selector attributes.
Element css selector – एलिमेंट सीएसएस सलेक्टर्स का उपयोग किसी भी एचटीएमएल वेब पेज के इंडिविजुअल एलिमेंट ऑब्जेक्ट को सलेक्ट करने में होता है।
Element css selector example.
h1 {
font-family: times new roman;
color: red;
}
Class css selector – मौजूदा एचटीएमएल वेब पेज के किसी पर्टिकुलर क्लास एलिमेंट को सलेक्ट कर सीएसएस ऐट्रिब्यूट्स इफ़ेक्ट को अप्लाई किया जाता है। हमेशा याद रखे की सीएसएस में क्लास सलेक्ट ऐट्रिब्यूट्स को एक पॉइंट (.) से स्टार्ट किया जाता हैं।
Class css selector example.
.highlight {
background-color: lime;
}
ID css selector – किसी पर्टिकुलर एचटीएमएल वेब पेज के पर्टिकुलर सिंगल आईडी एलिमेंट को सलेक्ट कर सीएसएस ऐट्रिब्यूट्स इफ़ेक्ट को अप्लाई किया जाता है । जहा आईडी सीएसएस सलेक्टर्स को हमेशा आईडी नाम से हैश टैग (#) से स्टार्ट किया जाता है।
Id css selector example.
#main-paragraph {
font-family: monotype corsiva;
font-color:red;
font-size: 2em ;
}
Attribute CSS selector – सीएसएस का उपयोग कर किसी पर्टिकुलर ऐट्रिब्यूट्स या इफ़ेक्ट वैल्यू बेस्ड सीएसएस एलिमेंट को सलेक्ट किया जाता है।
input[type=”number”] {
border: 1px solid blue;
}
Pseudo-class selectors – सीएसएस में पर्टिकुलर एलिमेंट को उनकी कंडीशन और जरूरत के आधार पर सलेक्ट कर सकते है।
p:hover {
text-decoration: underline;
text-decoration: bold;
}
Pseudo-element CSS selectors – सीएसएस में एक पर्टिकुलर एलिमेंट एलिमेंट को सलेक्ट करता है।
p::first-line {
font-color: red;
font-weight: bold;
}
css properties.
सीएसएस स्टाइलशीट प्रॉपर्टीज को कई वर्गों में विभाजित किया जा सकता है, सीएसएस प्रॉपर्टीज को एचटीएमएल इंडिविजुअल एलिमेंट टैग ऑब्जेक्ट पर स्पेशल सीएसएस ऐट्रिब्यूट्स और इफ़ेक्ट को अप्लाई किया जा सकता है,
So let’s understand many CSS attributes properties better.
Color and background css properties.
- color: red; /* display web page Text red color */
- background-color: yellow; /* display web page Background yellow color */
Text css properties.
- font-size: 2em; /* display 2 em text font Size */
- font-family: times new roman; /* display times new roman font type */
- text-align: right; /* align right order Text */
Box model css properties.
- margin: 20px; /* add 20px Space outside the element */
- padding: 25px; /* add 25px Space inside the element */
- border: 2px solid teal; /* add 2px Border around */
Layout CSS properties.
- display: flex; /* display flex Layout */
- position: absolute; /* set absolute Positioning method */
css properties values.
सीएसएस स्टाइलशीट वैल्यू प्रॉपर्टीज विभिन्न एलिमेंट को सलेक्ट करने में हेल्प करते हैं। यहाँ सीएसएस वैल्यू प्रॉपर्टीज कई प्रकार के हो सकते है, और इन्हे कई तरह से वेब पेज में लागु किया जा सकता है.
- Keyword values – सीएसएस वैल्यूज को फिक्स रिप्रेसन्ट करते है, कुछ कीवर्ड जिनमे, ऑटो, कोई नहीं, ब्लॉक, वर्ड है।
- Units values – सीएसएस वैल्यू कई यूनिट प्रकार के होते है
- जिसमे,
- Pixels (px) value – डिस्प्ले फिक्स्ड 20px वैल्यू को प्रीव्यू करता है।
- Percentage (%) value – मौजूदा सीएसएस ऑब्जेक्ट के लिए परसेंटेज वैल्यू को रिप्रेजेंट करता है, जैसे, 70%।
- ems value (em) – सीएसएस एलिमेंट ऑब्जेक्ट के लिए फ़ॉन्ट साइज के लिए जैसे, 3em है।
- rems value (rem) – सीएसएस एलिमेंट के फ़ॉन्ट साइज के लिए, जैसे, 1rem फॉण्ट साइज है।
Color values in CSS – सीएसएस एलिमेंट ऑब्जेक्ट के लिए विभिन्न फॉर्मेट में कलर ऐट्रिब्यूट्स को अप्लाई किया जाता है।
- सीएसएस टेक्स्ट कलर एक्साम्प्ल में, लाइम, येलो, ब्राउन, रेड।
- हेक्साडेसिमल कलर एक्साम्प्ल येलो कलर के लिए, #ffee58) ।
- RGB कलर एक्साम्प्ल ऑरेंज कलर के लिए, rgb(255, 112, 67))।
- Hsl कलर एक्साम्प्ल ब्लू कलर के लिए, HSL 231, 48%, 48%।
A complete example in CSS.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Stylesheet Example</title>
<body>
<style>
h1 {
color: blue;
font-size: 2em;
text-align: center;
margin: 30px;
}
p
{
color:red;
font-size:2em;
font-family: times new roman;
text-align:center;
}
.button {
background-color: green;
color: white;
padding: 20px 30px;
border: solif;
border-radius: 8px;
}
</style>
<h1>This Is A Heading Css Example</h1>
<p>This Is Paragraph Css Example</p>
<form>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
