Learn More

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 डॉक्यूमेंट में CSS को उपयोग करना बहुत आसान होता हैं । वेबसाइट का designing  पार्ट CSS के द्वारा किया जाता हैं । HTML वेब पेज को स्ट्रक्चर करके CSS के द्वारा उस स्ट्रक्चर को डिज़ाइन किया जाता हैं । कस HTML में CSS का उपयोग करने के तीन प्रकार हैं। साधारण हिंदी भासा में, यदि आप HTML में CSS को use करना चाहते हैं तो आप तीन तरीके से कर सकते हैं।

इनलाइन सीएसएस (Inline CSS )-

इनलाइन CSS एक लाइन में CSS का उपयोग करने का तरीका है। नाम से ही पता चलता हैं (इनलाइन) - एक पंक्ति में।

साधारण Hindi भाषा में कहे तो यदि आपको एक HTML लाइन (line) या पैराग्राफ में CSS का उपयोग करने की आवश्यकता है तो आप CSS को एक DIV या एक HTML टैग के साथ CSS का उपयोग कर सकते हैं ।

इनलाइन सीएसएस का निम्नलिखित उदाहरण आपको इनलाइन सीएसएस को समझने में मदत करेगा ।

Inline CSS


<!DOCTYPE>
<html>
<head>
<title>Inline CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </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 हेड मैं बनाई जाती हैं ।  जिसे पुरे पेज पर कही भी उपयोग किया जा सकता हैं ,

CSS in HTML


<!DOCTYPE>
<html>
<head>
<title>Internal CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>
Run

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 link टैग की मदत से इस प्रकार लिंक करते हैं ।

 

 


CSS फाइल को इस प्रकार क्रिएट करते हैं ।

myfile.html


<!DOCTYPE>
<html>
<head>
<title>Internal CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>
Run

उपरोक्त उदाहरण में, हमने एक HTML पेज बनाया है और CSS फ़ाइल को लिंक करने के लिए हटम्ल लिंक टैग का उपयोग किया है। जब आप सीएसएस फ़ाइल को एचटीएमएल पेज से जोड़ते हैं तो इसमें एचटीएमएल page  पर CSS का इफ़ेक्ट देखा जाता हैं ।

 

इस तरह से CSS के प्रकार को उसे करके हटम्ल में CSS का इफ़ेक्ट देखा जा सकता हैं ।

Recommended Posts:-