Syntax of CSS in Hindi |CSS में Syntax की पूरी जानकारी

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

हम यहाँ Syntax of CSS in Hindi के बारे में जानेंगे, यह कैसे काम करता है और यह कैसे इस्तेमाल किया जाता है। और जानिए क्या होते है CSS के प्रकार

CSS में Syntax का मतलब क्या होता है? |What Is Syntax of CSS in Hindi

CSS में Syntax का मतलब है कि आपको स्टाइल शीट में निर्दिष्ट गुणों को नियमित तरीके से लिखना होता है। इससे स्पष्ट होता है कि आपको सभी फंक्शन, स्टाइल नाम और उनके मानों को सही सिरेक्ट के अनुसार लिखना चाहिए।

CSS के संबंध में यदि आप कोई गलती करते हैं, तो आपका स्टाइल शीट काम नहीं करेगा। सही Syntax का उपयोग करने से, आप अपनी वेबसाइट को सही ढंग से स्टाइल कर सकते हैं।

CSS में Syntax को देखते हुए, हम देख सकते हैं कि यह सभी शैलियों के लिए एक अच्छी अनुकूलता प्रदान करता है। इसमें आप अपनी वेबसाइट के लिए सभी संबंधित शैलियों को एक साथ उपयोग कर सकते हैं।

इसलिए, अगर आप एक वेब डेवलपर हैं और आप वेबसाइट बनाने में व्यस्त हैं, तो सुनिश्चित करें कि आप अपने CSS को सही Syntax के साथ लिखते हैं। इससे आपकी वेबसाइट बेहतर ढंग से स्टाइल होगी और आप अपने उपयोगकर्ताओं को एक अच्छी उपयोगर्ता अनुभव प्रदान कर सकते हैं।

CSS में Syntax कैसे लिखा जाता है? | How To Write Syntax Of CSS In Hindi

CSS में Syntax को लिखने के लिए आपको कुछ नियमों का पालन करना होगा। ये नियम सही Syntax लिखने में मदद करते हैं।

• CSS syntax: CSS का सिंटैक्स सीखना बहुत महत्वपूर्ण होता है। CSS सिंटैक्स का उपयोग करके हम स्टाइल देते हैं जो HTML टैगों को दिखाने के लिए उपयोग किए जाते हैं। CSS के लिए सिंटैक्स लिखते समय हम selector, property, और value का उपयोग करते हैं।
• CSS selectors: CSS selectors का उपयोग करके हम HTML elements को select करते हैं और उन्हें स्टाइल देते हैं। जैसे कि यदि हम अपनी website के लिए <h1> टैग को select करते हैं तो हम इस selector का उपयोग करते हैं: h1{}
• CSS properties: CSS properties का उपयोग करके हम स्टाइल देते हैं। CSS properties का उपयोग करके हम element के साथ-साथ उसके साथ-साथ, उसकी font, color, size, margin, padding, border और background जैसी संपूर्ण styling को नियंत्रित करते हैं।
• CSS values: CSS values उनके respective properties के साथ-साथ काम करते हैं। जैसे कि, font-size प्रॉपर्टी के लिए value को 16px या 1.2em जैसे लिखा जाता है।
• Box model: Box model से एक element के content, padding, border, और margin को control किया जाता है। Box model के अंतर्गत कुछ properties हैं जैसे padding, border, और margin जो element के box model को define करते हैं।
• Layout techniques: Layout techniques के उपयोग से हम अपनी website के layout को design करते हैं। Flexbox और Grid layout दो popular layout techniques हैं जो कि responsive design के लिए बहुत useful होते हैं।
• Responsive design: Responsive design के उपयोग से हम अपनी website को ऐसे design करते हैं जो दिवंगत devices जैसे desktop, mobile, tablet आदि पर ठीक से दिखाई दे। इसके लिए हम मीडिया क्वेरी जैसी CSS technique का उपयोग करते हैं जो उन devices के साथ संगत होती हैं।
• Pre-processors: Pre-processors CSS के लिए मशहूर हैं जैसे Sass, Less, और Stylus। Pre-processors का उपयोग करके हम CSS को लिखने के साथ-साथ उसे आसानी से maintain कर सकते हैं। Pre-processors के उपयोग से हम variables, functions, और nested rules जैसी features का उपयोग कर सकते हैं।

विषय	उदाहरण
CSS syntax	selector {property: value;}
CSS selectors	element, .class, #id
CSS properties	color, font-size, margin
CSS values	red, 14px, 20px 10px
Box model	content, padding, border, margin
Layout techniques	float, position, display
Responsive design	@media (max-width: 768px) { ... }
Pre-processors	Sass: $primary-color: #333; / Less: @primary-color: #333; / Stylus: primary-color = #333;

उम्मीद है कि यह article आपको CSS syntax, selectors, properties, values, box model, layout techniques, responsive design और pre-processors के बारे में जानकारी देने में मददगार साबित हुआ होगा। यदि आपके पास कोई संदेह या सवाल हो तो कृपया comment करें।

इस तरह से CSS में Syntax लिखा जाता है। ध्यान रखें कि सही Syntax लिखना आपकी वेबसाइट को सुंदर बनाने में मदद करता है।

CSS में Syntax का उपयोग कैसे किया जाता है? | How To Use Syntax Of CSS In Hindi

CSS में Syntax का उपयोग स्टाइल शीट में गुणों को लिखने के लिए किया जाता है। गुण संबंधित होते हैं स्टाइल नाम और उनके मानों से जो आप अपनी वेबसाइट पर लागू करना चाहते हैं।

यहां कुछ उदाहरण हैं जिनमें Syntax का उपयोग किया जाता है:

1. स्टाइल नाम के साथ गुण लिखना:

उदाहरण:

h1 {
  color: red;
  font-size: 36px;
  font-weight: bold;
}

यहां h1 एक स्टाइल नाम है जिसके साथ गुणों को लिखा गया है।

2. एक से अधिक स्टाइल नाम को एक ही गुणों के साथ लिखना:

उदाहरण:

h1, h2, h3 {
  color: blue;
  font-size: 24px;
}

यहां h1, h2, h3 तीन स्टाइल नाम हैं जो एक ही गुणों के साथ लिखे गए हैं।

3. गुणों को कॉमा के साथ एक ही स्टाइल नाम में लिखना:

उदाहरण:

h1 {
  color: red;
  font-size: 36px, font-weight: bold;
}

यहां गुणों को कॉमा के साथ लिखा गया है जो एक ही स्टाइल नाम h1 के लिए लागू होंगे।

इस तरह से आप स्टाइल शीट में सही Syntax का उपयोग कर सकते हैं और अपनी वेबसाइट को सही ढंग से स्टाइल कर सकते हैं।

4. गुणों को निर्दिष्ट करने के लिए आईडी या क्लास का उपयोग करना:

उदाहरण:

#myDiv {
  color: green;
  font-size: 18px;
}

यहां #myDiv एक आईडी है जिसके साथ गुणों को निर्दिष्ट किया गया है। आप एक आईडी या क्लास का उपयोग करके अपने वेबसाइट के किसी विशेष घटक के लिए स्टाइल निर्दिष्ट कर सकते हैं।

5. गुणों को अनुक्रमिक तरीके से निर्दिष्ट करना:

उदाहरण:

ol {
  list-style-type: lower-alpha;
}

यहां ol एक स्टाइल नाम है जिसके साथ गुण list-style-type को निर्दिष्ट किया गया है जो अनुक्रमिक तरीके से lower-alpha है।

6. गुणों को स्वतंत्र मानों के साथ निर्दिष्ट करना:

उदाहरण:

p {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

यहां p एक स्टाइल नाम है जिसके साथ गुणों को स्वतंत्र मानों के साथ निर्दिष्ट किया गया है।

इस तरह से CSS में Syntax का उपयोग संभव होता है। आप अपनी वेबसाइट के लिए सही Syntax का उपयोग करके अपनी वेबसाइट को आकर्षक और आसानी से समझने वाला बना सकते हैं।

HTML में CSS कैसे Use करें? |How To Use CSS In HTML

HTML में CSS का use करने के लिए, हमें अपने HTML फ़ाइल के head section में एक टैग जोड़ना होगा।

यह नीचे दिए गए उदाहरण में देखा जा सकता है:

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<style>
		h1 {
			color: blue;
		}
	</style>
</head>
<body>
	<h1>Welcome to my website</h1>
	<p>This is my first website using HTML and CSS</p>
</body>
</html>

यहां, <style> टैग हमारा CSS code है जो हमें अपने HTML code में embed करना है।

अधिकतम क्रमशः, एक CSS फाइल बनाना और इसे अपने HTML फाइल में जोड़ना बेहतर होता है।

यह नीचे दिए गए उदाहरण में देखा जा सकता है:

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Welcome to my website</h1>
	<p>This is my first website using HTML and CSS</p>
</body>
</html>

यहां, हमने एक <link> टैग जोड़ा है जिसके href attribute में हमने हमारी CSS फ़ाइल का नाम लिखा है। इसे अपने HTML फ़ाइल के head section में जोड़ने से, हमारे सारे HTML pages पर यह स्टाइल लागू हो जाएगा।

यह नीचे दिए गए उदाहरण में देखा जा सकता है कि कैसे हम एक अलग CSS फ़ाइल बनाते हैं:

/* style.css file */
h1 {
color: blue;
}

p {
font-size: 16px;
}

CSS का सिंटैक्स हिंदी वीडियो में

निष्कर्ष

इस Syntax of CSS in Hindi लेख में हमने सीखा कि CSS क्या होती है और उसका सिंटैक्स क्या होता है। हमने इस Syntax of CSS in Hindi लेख में CSS selectors, properties, values, box model, layout techniques, responsive design, और pre-processors जैसे महत्वपूर्ण concepts को भी समझाया। इसलिए, आप अब CSS का उपयोग करके अपनी website को visually appealing और professional look दे सकते हैं।

इसलिए, अगर आप Web development करना चाहते हैं तो CSS सीखना ज़रूरी होता है। आप विभिन्न online resources से CSS सीख सकते हैं जैसे W3Schools, CSS Tricks, Codecademy, और Mozilla Developer Network।

अगर आपके पास Syntax of CSS in Hindi या CSS से संबंधित कोई सुझाव या कमेंट है तो कृपया नीचे कमेंट बॉक्स में शेयर करें।

कंप्यूटर के बारे में और सीखे

• Browser Kya Hai |ब्राउज़र का मतलब क्या है? और इंटरनेट ब्राउजिंग कैसे करें?
• Operating System Kya Hai:समझे ओपरेटिंग सिस्टम क्या है और इसकी जरुरत क्यों है?