CSS एक सरल और लोकप्रिय लैंग्वेज है. जिसका उपयोग वेबपेज में HTML के साथ होता है. CSS में विभिन्न attribute होता है. जो किसी वेबपेज को dynamic और प्रभावशाली बनाते है. इस आर्टिकल में हम CSS के विभिन्न प्रकारों के बारे में विस्तार से जानकारी लेगे. इस आर्टिकल (Types of css in hindi) में हम जानेगे की किस प्रकार से CSS कोड को विभिन्न प्रकार से HTML कोड के साथ जोड़ना संभव है. और इन विभिन्न तरीको में किस प्रकार से कम या ज्यादा प्राथमिकता मिलती है.
Types of CSS in Hindi
Cascading Style Sheet (CSS) का उपयोग वेबपेज में स्टाइल सेट करने के लिए किया जाता है. CSS के style sheet में HTML एलेमेनट्स होते है. CSS के जरिये Style sheet में कलर, फॉण्ट साइज़, बैकग्राउंड कलर इत्यादि डाले जाते है.
तीन प्रकार के CSS होते है. जिसे निचे बिन्दुओ में बताया गया है.
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS
इस प्रकार में CSS में वेबपेज की property को HTML कोड के body सेक्शन में डाला जाता है. जिसे निचे उदहारण में दर्शाया गया है.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = “color:#009900; font-size:50px;
font-style:italic; text-align:center;”>
HindiClick
</p>
</body>
</html>
ऊपर दीए गए उदहारण में वेबपेज की property को HTML के कोड के बॉडी सेक्शन में दिया गया है. इस प्रकार के CSS को अत्यधिक प्राथमिकता मिलती है.
Internal or Embedded CSS
इस प्रकार के CSS कोड को तब उपयोग करते है. जब एक अकेले HTML वेबपेज को अगल तरीके से डिजाईन और विकसित करना होता है. इसमें CSS कोड को HTML के head सेक्शन में डाला जाता है. इसके उदाहरन को निचे दर्शाया गया है.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = “main”>
<div class =”GFG”>Hindiclick</div>
<div class =”geeks”>
A computer science portal
</div>
</div>
</body>
</html>
ऊपर उदाहरण में आप देख सकते है. जो भाग नीले कलर से दर्शाया गया है. वो CSS कोड है. जिसे विशेष वेबपेज को अलग ढंग से डिजाईन करने के उद्देश्य से उपयोग किया गया है.
External CSS
इस प्रकार के CSS में एक अगल फाइल में CSS के कोड लिखे जाते है. जिसके अनुसार वेबपेज को विकसित करना होता है. तथा इस फाइल को .css extension के साथ सुरक्षित किया जाता है. इस CSS फाइल को HTML डॉक्यूमेंट के साथ link tag के द्वारा जोड़ा जाता है. ये स्टाइल पुरे वेबपेज पर लागु होता है. जिसे निचे उदाहरण में दर्शाया गया है.
निचे उदाहरण के तौर पर एक hindiclick.css के नाम से फाइल को सुरक्षित किया गया है.
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
तथा इसे निचे दिए गर HTML फाइल के साथ link tag से लिंक किया जाता है.
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”geeks.css”/>
</head>
<body>
<div class = “main”>
<div class =”GFG”>Hindiclick</div>
<div id =”geeks”>
A computer science portal
</div>
</div>
</body>
</html>
Properties of CSS
CSS में Inline CSS को सबसे पहले प्राथमिकता दी जाती है. उसके बाद internal/Embedded CSS स्टाइल को प्राथमिकता दी जाती है. तथा सबसे अंतिम में External CSS को रखा जाता है. इससे क्या मतलब है. इसको हम निचे बिन्दुओ में समझते है.
- अगर किसी HTML कोड में body में CSS कोड है. तो इसे सबसे पहले प्राथमिकता पर रखा जाता है. तथा इसके अनुसार ही वेबपेज को डिजाईन किया जाता है. Inline CSS अन्य Internal और External CSS कोड को निष्क्रिय कर देता है.
- अगर किसी HTML कोड में head सेक्शन में CSS कोड है. तो इसे दुसरे नंबर पर प्राथमिकता दी जाती है. ये External CSS फाइल को निष्क्रिय कर देता है.
- वही अगर HTML कोड के head और body दोनों में CSS कोड नहीं है. तो link tag के द्वारा जुडी हुई External फाइल के CSS कोड के अनुसार वेबपेज को डिजाईन और विकसित किया जाता है.
आपने क्या सिखा
इस आर्टिकल (Types of css in hindi) को लिखने का हमारा मकसद आपको CSS के विभिन्न प्रकारों और उनकी प्राथमिकता के बारे में विस्तार से जानकारी देना है. CSS एक प्रभावशाली लैंग्वेज है. जो वेबपेज को और अधिक प्रभावशाली और interactive बनती है.
हमारी पूरी कोशिश रहती है की हम आर्टिकल को आसान हिंदी भाषा में लिखे. जिसे पढना और समझाना हमारे यूजर के लिए आसान हो. ये आर्टिकल आपको कैसा लगा ये मुझे तभी पता चलेगा. जब आप निचे कमेंट करके मुझे बताओगे.
इस आर्टिकल को शेयर कर के आपके उन दोस्तों तक पहुचाए जो किसी परीक्षा या competitions एग्जाम की तैयार कर रहे है.