Types of CSS | सीएसएस के प्रकार | CSS in Hindi
CSS को कास्केडिंग स्टाइलशीट(cascading stylesheet) के रूप में जाना जाता है जिसका उपयोग वेब पेज को डिजाइन करने के लिए किया जाता है। प्रत्येक HTML पेज content को डिजाइन करने के लिए सीएसएस को उपयोग किया जाता हैं । HTML पेज का उपयोग करके CSS तीन प्रकार(types) के होते हैं।
Types of CSS in Hindi
1. इनलाइन सीएसएस (Inline CSS )
2. आंतरिक सीएसएस (Internal CSS )
3. बाहरी सीएसएस (External CSS )
HTML डॉक्यूमेंट (Document) में CSS को उपयोग करना बहुत आसान होता हैं । वेबसाइट का designing पार्ट CSS के द्वारा किया जाता हैं । HTML वेब पेज को स्ट्रक्चर (Structure) करके CSS के द्वारा उस स्ट्रक्चर को डिज़ाइन किया जाता हैं । HTML में CSS का उपयोग करने के तीन प्रकार होते हैं । साधारण हिंदी भाषा में, यदि आप HTML में CSS को use करना चाहते हैं तो आप तीन तरीके से कर सकते हैं।
इनलाइन सीएसएस (Inline CSS )-
इनलाइन CSS एक लाइन में CSS का उपयोग करने का तरीका है। नाम से ही पता चलता हैं (इनलाइन) - एक पंक्ति में।
साधारण Hindi भाषा में कहे तो यदि आपको एक HTML लाइन (line) या पैराग्राफ में CSS का उपयोग करने की आवश्यकता है तो आप CSS को एक DIV या एक HTML टैग के साथ CSS का उपयोग कर सकते हैं ।
इनलाइन सीएसएस का निम्नलिखित उदाहरण आपको इनलाइन सीएसएस को समझने में मदत करेगा ।
Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS in HTML </title>
</head>
<body>
<div style="height:100px;width:400px;background-color:grey;color:white;">
<h1>Welcome to our Website</h1>
<p style="color:red;">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
</div>
</body>
</html>
आंतरिक सीएसएस (Internal CSS ) -
आंतरिक सीएसएस(Internal CSS) का मतलब हैं HTML के पेज पर CSS को बना कर उपयोग करना , जिसका अर्थ है कि हम HTML <head> टैग के अंदर एक सीएसएस बनाते हैं और क्लास और आईडी को कॉल करके इसका उपयोग करते हैं। Internal CSS का मतलब हैं जब हम हटम्ल हेड टैग में CSS बनाते हैं और उसी पेज में use करते हैं ऐसे CSS को इंटरनल CSS कहते हैं । यह एक HTML पेज बनाने और उपयोग करने में बहुत सरल है।
इनलाइन सीएसएस का निम्नलिखित उदाहरण आपको Inline सीएसएस का मुख्य उद्देश्य समझ आजायेगा ।
साधारण Hindi भाषा में समझे तो internal CSS को HTML के हेड टैग में <style></style> बना कर HTML में उपयोग करते हैं । CSS के same हटम्ल पेज में बनाकर use करने को इंटरनल CSS कहते हैं ।
Inline CSS केवल एक लाइन या एक टैग के साथ कोड में use की जाती हैं परन्तु इंटरनल CSS पुरे पेज के लिए HTML हेड tage के अंदर बनाई जाती हैं । जिसे पुरे पेज पर कही भी उपयोग किया जा सकता हैं ,
CSS in HTML
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS in HTML </title>
<style>
.header{
height:100px;
width:400px;
background-color:grey;
color:white;
}
p{
color:red;
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome to our Website</h1>
<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
</div>
</body>
</html>
External CSS -
यह CSS का तीसरा प्रकार होता हैं जिसमे CSS के लिए अलग फाइल बना दी जाती हैं और उस फाइल को HTML पेज से लिंक कर दिया जाता हैं । CSS का जितना भी कोड होता हैं CSS फाइल में लिखा जाता हैं । यह एक सबसे अच्छा तरीका होता और सबसे ज्यादा उपयोग किया जाता हैं ।
External CSS बनाने के लिए Notepad के नई फाइल में CSS का कोड लिख कर स्टाइल,CSS कुछ इस तरह से save करके HTML में लिंक किया जाता हैं । CSS फाइल का नाम कुछ भी रख सकते हैं पर file के नाम के साथ CSS का extension ,CSS को लिख कर फाइल सेव की जाती हैं ।
जैसे -
style.css
header.css
footer.css
आदि
इनलाइन CSS का निम्नलिखित उदाहरण आपको CSS के तीसरे प्रकार external प्रकार को समझने में मदत करेगा ।
CSS फाइल बना कर HTML में लिंक करने के लिए हटम्ल हेड में CSS फाइल को HTML link टैग की मदत से इस प्रकार लिंक करते हैं ।
<link rel="stylesheet" type="text/css" href="myfile.css">
CSS फाइल को इस प्रकार क्रिएट करते हैं ।
myfile.html
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS in HTML </title>
<link rel="stylesheet" type="text/css" href="myfile.css">
</head>
<body>
<div class="header">
<h1>Welcome to our Website</h1>
<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
</div>
</body>
</html>
उपरोक्त उदाहरण में, हमने एक HTML पेज बनाया है और CSS फ़ाइल को लिंक करने के लिए हटम्ल लिंक टैग का उपयोग किया है। जब आप सीएसएस फ़ाइल को एचटीएमएल पेज से जोड़ते हैं तो इसमें एचटीएमएल page पर CSS का इफ़ेक्ट देखा जाता हैं ।
इस तरह से CSS के प्रकार को Use करके हटम्ल में CSS का इफ़ेक्ट देखा जा सकता हैं ।
Live Chat