CSS क्या है- What is CSS in Hindi?

by
css kya hai

नमस्कार दोस्तों! इस लेख में हम आपको CSS के बारे में पूरी जानकारी देने जा रहे है। किसी भी वैबपेज को बनाने के लिए एक मार्कअप लैंगवेज जैसे HTML, DHTML, XML आदि की जरूरत पड़ती है। मार्कअप लैंगवेज के द्वारा वैबसाइट के स्ट्रक्चर को डिज़ाइन करते है। जब आप किसी वैबसाइट को विसिट करते है तो देखते है कि उसमें आपको बहुत सारे visuals होते है जो वैबसाइट को आकर्षक बनाते है। html और css मिलकर ही वेबपेज का निर्माण करते है। अगर वैबपेज अच्छा नहीं दिखेगा तो विजिटर्स वैबसाइट के कंटैंट को पसंद नहीं करते है। आइये जानते है एक वैबसाइट में CSS का कितना महत्वपूर्ण योगदान होता है।

CSS क्या है-What is CSS in Hindi?

Cascading Style Sheets जिसे हम शॉर्ट फॉर्म में CSS बोलते है, यह वैबसाइट को एक अच्छा लूक देने के लिए उपयोग की जाने वाली ब्राउज़र बेस्ड भाषा है। CSS web-page के colours, text, fonts, elements के बीच spacing आदि जैसी महत्वपूर्ण चीजों को हैंडल करती है। आइये इसे एक उदाहरण द्वारा समझते है- जब आप घर बनाते है तो आप ईटों को जोड़कर घर कर ढांचा(structure) तैयार करते है। एक बार जब आपका घर खड़ा हो जाता है छत ढल जाती है फिर फिनिशिंग के लिए आप उसमें प्लास्टर, पैंट, टाइल्स लगवाना, सजावट करना जैसे कार्य करते है जिससे घर सुंदर दिख सके। इसी काम के लिए CSS को website deisigning में उपयोग किया जाता है। CSS उपयोग किए जाने के मुख्य कारण:-

  • यह HTML एलिमेंट्स को कैसे और कहाँ रखना है सुनिश्चित करता है।
  • वैबसाइट को attractive और beuatiful डिज़ाइन देने के लिए।
  • HTML elements की styling के लिए।
  • Web Page के layout को बनाने के लिए।
  • Responsive वेबसाइट निर्माण में, जो हर प्रकार के screen size वाले डिवाइस में अच्छे से डिस्प्ले हो सके।

CSS Syntax

h2{
   color: red; 
   font-size: 24px;
   font-family: Arial;
  }
css syntax in hindi

किसी भी CSS कोड के दो भाग होते है पहला Selector part और दूसरा Declaration part. HTML के जिस एलिमेंट को स्टाइल प्रदान करना है वह selector होता है। Declaration part में Selector की styles को define किया जाता है जैसे color, font-size, font-family आदि। Declaration part के भी दो भाग है- property और value.

अन्य पोस्ट पढ़े→

CSS के प्रकार- Types of CSS in Hindi

हम HTML document में CSS को तीन प्रकार से use कर सकते है, वो तीन प्रकार निम्न है- (1)Inline CSS (2)Internal CSS (3)External CSS

1. Inline CSS

जब किसी HTML tags के आगे ‘style’ keyword के साथ CSS properties को उपयोग करते है तो इस तरीके को Inline CSS कहते है। इसमें हर एक selector में बार-बार CSS add करना पड़ता है। 

<html>
<body>

<h1 style="color:blue; text-align:center;">Frist Main Heading</h1>
<p style="color:red;">First Paragraph</p>

</body>
</html>

2. Internal CSS

HTML डोक्यूमेंट में <head>___</head> tag के अंदर <style></style> tags में जब CSS properties को उपयोग किया जाता है तो इसे Internal CSS कहा जाता है। CSS add करने के इस तरीके में आपको हर individual selector के लिए CSS लिखने की जरूरत नहीं होती। 

<html>
<head>
<style>
 body {
  background-color: black;
}

 h1 {
  color: red;
  margin: 5px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. External CSS

HTML document में CSS add करने का यह तरीका सबसे ज्यादा प्रचलित है। इसमें एक .css extension वाली external CSS file बनाई जाती है, जिसे HTML document में लिंक कर दिया जाता है। इससे style sheet की reusability बढ़ जाती है। हम चाहे तो इसे कितने भी HTML डाक्यूमेंट के लिए उपयोग कर सकते है।

example.html

<html>
<head>
<link rel="stylesheet" href="my_style_file.css"> <!-- linked with my_style_sheet.css-->
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

my_style_sheet.css

body {
  background-color: blue;
}
h1 {
  color: navy;
  margin: 10px;
}

my_style_sheet.css यह एक CSS फ़ाइल है जो example.html के लिए एक external style sheet की तरह कार्य करती है।

Leave a Comment