css-types-in-hindi

CSS के प्रकार ? CSS Types In Hindi, Step by Step Explain

by

CSS क्या है और CSS का use हम केसे करे ? इन सभी question पर तो पहले से ही काफी सारे ब्लॉग मिल जायेंगे आपको लेकिन CSS Types In Hindi के बारे में आपको कम ब्लॉग मिलेंगे, क्योंकि

Table Of Content hide
  1. 1) CSS Types In Hindi
  2. 2) CSS types with examples
    1. 2.1) Inline CSS
      1. 2.1.1) Inline CSS के फायदे
      2. 2.1.2) Inline CSS के नुकसान
    2. 2.2) Internal CSS
      1. 2.2.1) Internal CSS के फायदे
      2. 2.2.2) Internal CSS के नुकसान
    3. 2.3) External CSS
      1. 2.3.1) External CSS के फायदे
      2. 2.3.2) External CSS के नुकसान
    4. 2.4) CSS types में बेहतर कौन है ?
  3. 3) Conclusion
    1. 3.1) CSS कितनें प्रकार की होती है ?
    2. 3.2) CSS type में बेहतर कोनसी है ?
    3. 3.3) CSS लिखनें का बेहतर तरीका ?

इस टॉपिक को काफी लोग हल्के में ले लेते है मगर आप इस टाइप की गलती मत करना क्योंकि ये टॉपिक काफी important है CSS के लिए | अगर कोई web डिजाईन सीखना चाहता है तो सबसे पहले HTML सीखना होगा |

HTML सिखने के बाद आपको सीखनी पड़ेगी CSS और अगर आप CSS सिख रहे है तो आपको CSS के बारे में बेसिक जानकारी होनी चाहिए, बेसिक जानकारी लेना कोई अनिवार्य नही है लेकिन आपको CSS start करने से पहले बेसिक जानकारी हासिल करनी चाहिए, इससे आपको CSS सिखने में काफी आसानी होगी |

CSS Types In Hindi – सबसे पहले हम बात कर लेते है CSS के बारे में अगर आपको CSS की परिभाषा पता है तो अच्छी बात है अगर नही पता तो कोई बात नही आर्टिकल को पूरा end तक पढिये आपको CSS की बेसिक जानकारी के बारे में पता चल जायेगा |

CSS kya hai – CSS की full form है (Cascading Style Sheets), और CSS का प्रयोग web pages के layout को अधिक सुन्दर बनाना है |

CSS का use कर के हम HTML में element या टैग (h1, p, div) के डिजाईन को control कर सकते है जेसे की background, color, background image और font size आदि |

CSS Types In Hindi

अब बात करते है CSS Types के बारे में, तो HTML के element पर हम 3 तरीके से CSS कर सकते है |

Css-Types-In-Hindi
  1. Inline
  2. Internal 
  3. External 

इन 3 तरीको से हम CSS कर सकते है और आगे इस आर्टिकल में आप ये भी जानोगे की कोनसा तरीका बेस्ट होगा CSS करने के लिए इसलिए इस आर्टिकल को अंत तक जरुर पढ़ें |

CSS types with examples

Inline CSS

inline CSS का उपयोग किसी special HTML element की style के लिए किया जाता है, inline CSS करनें के लिए आपको प्रत्येक HTML टैग में style attribute ऐड करना होगा और बिना किसी selector के डायरेक्ट उस HTML element पर CSS करनीं होगी |

<h1 style="color: #000;font-size: 2rem;text-transform: uppercase;">Css Types In Hindi</h1>

अब मैने यहाँ attribute शब्द का प्रयोग किया है, HTML में attribute का मतलब है एक tag के अंदर उस टैग की extra information को add करना |

Inline CSS के फायदे

आप आसानीं से और जल्दी से किसी भी HTML element पर या HTML पेज पर CSS कर सकते हैं बिना किसी परेशानी के और बिना किसी selector के |

तथा inline CSS में आपको दूसरी कोई भी फाइल बनानें की जरूरत नहीं है | इसके आलावा कभी-कभी इस तरह के प्रोजेक्ट देखनें को मिलते हैं जिनमें CSS तक हमारी पहुँच ही नहीं होती है और सिर्फ 1 या 2 element की CSS करनीं होती है, तो उस condition में हम एक या दो element की style change कर सकते हैं inline CSS की मदद से |

Inline CSS के नुकसान

प्रत्येक HTML element में CSS करनें से टाइम की खपत ज्यादा होगी और आपके HTML का structure भी गड़बड़ हो जायेगा जिसके कारण खुद का लिखा हुवा code खुद को ही समझ में नहीं आएगा |

Internal CSS

दोस्तों Internal or embedded CSS करनें के लिए आपको HTML में head टैग के अंदर style टैग start करना होगा और style टैग के अंदर आप किसी एक पेज की CSS कर सकते हैं लेकिन आपको एक बात भी याद रखनी है की अलग-अलग पेज में Internal or embedded CSS करनें में काफी टाइम लगता है |

निचे आप internal CSS का उदहारण देख सकते हैं | 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css types with examples</title>
  <style>
     h1{
     font-size: 2rem;
     text-transform: uppercase;
     text-align: center;
     color: #000;
       }
  </style>
</head>
<body>
     <h1>Css Types In Hindi</h1>
</body>
</html>

Internal CSS के फायदे

Internal CSS में आप id और class selector का इस्तेमाल कर सकते हैं क्योंकि आप उसी HTML फाइल में काम करेंगे इसलिए आपको multiple फाइल जोडनें की जरूरत नहीं है |

Internal CSS के नुकसान

दोस्तों Internal CSS के फायदे हैं लेकिन कुछ नुकसान भी हैं जिनमें सबसे बड़ा नुकसान टाइम का होता है Internal CSS आप सिर्फ एक webpage की CSS करनें के लिए कर सकते हैं |

इसके आलावा अगर आप एक ही फाइल में HTML का code लिख रहे हैं और उसी फाइल में CSS का code लिख रहे हैं तो इससे उस पेज का browser में साइज़ और लोडिंग टाइम बढ़ जायेगा जिससे speed slow होनीं की सम्भावनाएं रहती है |

External CSS

External CSS में CSS फाइल को HTML document में लिंक करवाया जाता है, इसके भी 2 रास्ते है
1 – आप कोई भी CDN लिंक add करवा सकते है |
2 – आप custom CSS फाइल को save करके भी लिंक करवा सकते है जेसे –

CDN उदहारण 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css types with examples</title>
  <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
     h1{
	font-size: 2rem;
	text-transform: uppercase;
	text-align: center;
	color: #000;
       }
  </style>
</head>
<body>
	<h1>Css Types In Hindi</h1>
</body>
</html>

2 – CSS save करके लिंक करवाना 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css types with examples</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
     h1{
	font-size: 2rem;
	text-transform: uppercase;
	text-align: center;
	color: #000;
       }
  </style>
</head>
<body>
	<h1>Css Types In Hindi</h1>
</body>
</html>

External CSS के फायदे

External CSS के use से हम एक ही जगह से पूरी website की CSS को control कर सकते हैं और CSS का code अलग होनें तथा HTML का code अलग होनें के कारण फाइल की साइज़ भी कम होगी जिससे लोडिंग टाइम कम होगा और website की स्पीड में सुधार होगा |

External CSS के नुकसान

दोस्तों External CSS में हो सकता है कि बाहरी सीएसएस लोड होने तक आपके पेज सही तरीके से रेंडर न हों | या कई CSS फाइलों को अपलोड या लिंक करने से आपकी साइट का लोडिंग टाइम बढ़ सकता है |

CSS types में बेहतर कौन है ?

CSS Types In Hindi के बारे में तो आपने पढ़ लिया है लेकिन अब एक सवाल और आया होगा आपके मन में की CSS Types के 3 तरीको में से कोनसा तरीका बेस्ट होगा और सरल होगा |

इनमे सबसे अच्छा तरीका है External CSS इसके फायदे ज्यादा है, फायदों की बात करे तो सबसे बड़ा फायदा ये है की आप HTML के same element की CSS एक जगह कर सकते है जिससे आपका काम भी फ़ास्ट हो जाता है और CSS का कोड बार बार लिखने की जरूरत नही पड़ती है |

और दूसरा फायदा है आपकी वेबसाइट speed क्योंकि CSS का कोड जितना कम लिखा गया हो तो ब्राउज़र को भी उतना ही कम टाइम लगेगा कोड पढने में और आपकी वेबसाइट की speed भी फ़ास्ट हो जाएगी |

अगर आपको HTML के और भी helpful आर्टिकल पढने है तो आप पढ़ सकते है
1 – Top 10 HTML Formatting Elements

Conclusion

उम्मीद है दोस्तों आज के आर्टिकल CSS Types In Hindi से आपकी कुछ help हुई होगी अगर आपको ये आर्टिकल हेल्पफुल लगा हो तो इसे अपनें दोस्तों के साथ share जरुर करें |

अगर और कोई सवाल है तो आप कमेंट कर सकते है मुझे ख़ुशी होगी आपके जवाब देने में और मुझे ख़ुशी होगी अगर आप अपना feedback कमेंट में देते है तोह ,
धन्यवाद….

CSS कितनें प्रकार की होती है ?

CSS मूलतः 3 प्रकार की होती है जिनमें सामिल है –
1. Inline CSS.
2. Internal or Embedded CSS.
3. External CSS.

CSS type में बेहतर कोनसी है ?

दोस्तों External CSS सबसे बेहतर CSS है जिसका उपयोग आप कर सकते हैं | External CSS का उपयोग करनें के लिए आपको CSS की एक अलग फाइल बनानी होगी और उसे HTML की फाइल में head टैग के अंदर add करना होगा |

CSS लिखनें का बेहतर तरीका ?

selector{
property: value;
}

Leave a Comment