CSS के 3 Style type हिंदी में

Admin February 05, 2021

 CSS Styles के 3 Types क्या हैं ?


  हेल्लो दोस्तों हमारी वेबसाइट में आपका स्वागत है आज के इस ट्यूटोरियल में हम  CSS Style  के तीन प्रकारों के बारे में जानेंगे और उनमे क्या अंतर होता है वह सीखेंगे | 

CSS  के तीन प्रकार होते हैं इनलाइन, एक्सटर्नल, और इंटरनल । हम तीनों Style के उपयोग करने के फायदे और नुकसान के बारे में जानेंगे । 


css ke types


CSS क्या होता  हैं ?

CSS या कैस्केडिंग स्टाइल शीट्स एक मार्कअप language होता है जो वेब पेजों की looks और design के लिए जिम्मेदार होता है। यह वेबसाइट elements के रंग, फ़ॉन्ट और लेआउट को कण्ट्रोल करता है।

यह style sheet language अपनी वेबसाइट पर  effects और animations जोड़ने की अनुमति देती है। आप कुछ सीएसएस एनिमेशन जैसे क्लिक बटन प्रभाव, स्पिनर या लोडर और एनिमेटेड पृष्ठभूमि प्रदर्शित करने के लिए इसका उपयोग कर सकते हैं।

बिना CSS के websites में सिर्फ HTML Page text की तरह दिखाई देता है उदहारण के लिए आप ट्विटर के web page को बिना CSS के निचे फोटो में देख सकते हैं ।


Inline, External और Internal CSS Styles के बीच Difference  क्या है ?


CSS को लागू करने के लिए आप तीन तरीकों का उपयोग कर सकते हैं : Inline, External और Internal CSS Styles । चलिए इनके बारे में विस्तार से जानते हैं 


Internal CSS


Internal CSS में HTML document के <head> section के बीच में <style> tag को add करना पड़ता है 

यह CSS Styles एकल पृष्ठ को स्टाइल करने की एक प्रभावीशाली  विधि है। हालाँकि, कई page के लिए इस style का उपयोग करना आसान नहीं है क्योंकि आपको अपनी वेबसाइट के प्रत्येक पृष्ठ पर CSS rules लगाने की आवश्यकता होती है।

internal CSS का उपयोग कैसे करें?

  1. अपना HTML पेज खोलें और <head> ओपनिंग टैग लगाएं।
  2. <Head> टैग के ठीक बाद निम्न कोड डालें

<style type="text/css">


नई लाइन पर CSS rules जोड़ें। यहाँ एक उदाहरण दिया गया  है:


body {

    background-color: blue;

}

h1 {

    color: red;

    padding: 60px;

}

उसके बाद नीचे का closing tag टाइप करें

</style>


आपकी HTML फ़ाइल कुछ  इस तरह दिखाई देगी:


<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: blue;

}

h1 {

    color: red;

    padding: 60px;

} 

</style>

</head>

<body>


<h1>MY Tutorials</h1>

<p>This is our paragraph.</p>


</body>

</html>


Internal CSS के फायदे :


  1. आप इस style sheet में class और ID Selector का उपयोग कर सकते हैं।
  2. चूंकि आप केवल उसी HTML फ़ाइल में कोड जोड़ते हैं, इसलिए आपको कई फ़ाइलों को अपलोड करने की आवश्यकता नहीं होती है।
  3. Internal CSS के नुकसान :

  5. HTML document  में कोड जोड़ने से pagge  का size और loaing time बढ़ सकता है


External CSS

External CSS के साथ, आप अपने वेब पेजों को एक बाहरी .css फ़ाइल से लिंक कर सकते हैं , जो आपके डिवाइस में किसी भी टेक्स्ट एडिटर द्वारा बनाई जा सकती है

यह सीएसएस प्रकार एक अधिक कुशल विधि है, विशेष रूप से एक बड़ी वेबसाइट को स्टाइल करने के लिए। एक .css फ़ाइल को संपादित करके, आप एक बार में अपनी पूरी साइट बदल सकते हैं।


External CSS का उपयोग कैसे करें?


  1. text editor के साथ एक नई .css फ़ाइल बनाएँ, और CSS rules बनाये । 
  2. अपनी HTML शीट के <head> sheet में, अपने बाहरी .css फ़ाइल के reference में <title> टैग के बाद जोड़ें:
  3. <link rel="stylesheet" type="text/css" href="style.css" />
  4. अपनी .css फ़ाइल के नाम के साथ style.css बदलना न भूलें।


External CSS के फायदे :

  1. चूंकि सीएसएस कोड एक अलग दस्तावेज़ में है, इसलिए आपकी HTML फ़ाइलों में एक क्लीनर संरचना होगी और आकार में छोटी होगी।
  2. आप कई पृष्ठों के लिए एक ही .css फ़ाइल का उपयोग कर सकते हैं।


External CSS के नुकसान :


  1. बाहरी CSS लोड होने तक आपके पृष्ठ सही तरीके से प्रस्तुत नहीं किए जा सकते।
  2. कई सीएसएस फ़ाइलों को अपलोड या लिंक करने से आपकी साइट का डाउनलोड समय बढ़ सकता है।


Inline CSS

Inline CSS का उपयोग एक विशिष्ट HTML तत्व को स्टाइल करने के लिए किया जाता है। इस CSS शैली के लिए, आपको केवल seletor  का उपयोग किए बिना, प्रत्येक HTML टैग में style विशेषता जोड़ने की आवश्यकता होगी।

यह सीएसएस प्रकार वास्तव में recommend नहीं किया जाता है, क्योंकि प्रत्येक HTML टैग को व्यक्तिगत रूप से स्टाइल करने की आवश्यकता होती है। यदि आप केवल इनलाइन CSS का उपयोग करते हैं तो आपकी वेबसाइट का प्रबंधन बहुत कठिन हो सकता है।


आइए एक उदाहरण देखें। यहां, हम <p> और <h1> टैग में एक इनलाइन सीएसएस जोड़ते हैं:


<!DOCTYPE html>

<html>

<body style="background-color:black;">


<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>

<p style="color:white;">Something usefull here.</p>


</body>

</html>

Inline CSS के फायदे :

  1. आप आसानी से और जल्दी से एक HTML पृष्ठ पर सीएसएस नियमों को सम्मिलित कर सकते हैं। इसीलिए यह विधि परिवर्तनों का परीक्षण या पूर्वावलोकन करने और आपकी वेबसाइट पर त्वरित-सुधार करने के लिए उपयोगी है।
  2. आपको बाहरी शैली की तरह एक अलग दस्तावेज़ बनाने और अपलोड करने की आवश्यकता नहीं है।


Inline CSS के नुकसान :

  1. हर HTML तत्व में CSS नियम जोड़ना समय लेने वाला है और आपके HTML संरचना को गड़बड़ बनाता है।
  2. कई तत्वों को स्टाइल करने से आपके पृष्ठ का आकार और डाउनलोड समय प्रभावित हो सकता है।

Conclusion

इस ट्यूटोरियल में, आपने सीएसएस के तीन प्रकारों में अंतर सीखा है अगर आपको यह पोस्ट पसंद आया तो इस  शेयर जरुर करें ।