इस Tutorial में हम आपको HTML Document में CSS Code Add करने का तरीका बताएंगे. सुविधा की दृष्टि के लिए इस Tutorial को छोटे-छोटे भागों में बांटा गया हैं. ताकि Tutorial का प्रत्येक भाग समझ में आ जाए.
Table of Content
HTML Document में CSS Add करना – How to Add CSS in HTML Documents in Hindi?
CSS एक बहुत ही Advance और Flexible Web Designing Language हैं. जो Web Masters को कार्य करने के की आजादी देती है. इसकी एक बानगी हैं CSS Style करना. हम मुख्यत: तीन प्रकार से CSS Add कर सकते हैं.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS Add करना
Inline CSS को HTML Element में लिखा जाता हैं. Inline CSS को हम Style Attribute द्वारा Declare करते हैं. जो सिर्फ उसी Element को प्रभावित करती हैं. जिस Element में Style Rule Declare किया गया हैं. Document के अन्य Elements पर इसका कोई प्रभाव नही पडता हैं. नीचे उदाहरण देखें.
ऊपर कोड को देखकर आप खुद जान सकते हैं कि यह कितना आसान हैं. बस आपको जिस Element के लिए Style Rule Declare करना हैं. उस Particular Element में style Attribute का इस्तेमाल करके CSS Declare करनी हैं.
Internal CSS Add करना
Internal CSS को किसी Particular Page के लिए लिखा जाता हैं. Internal CSS Style का Effect सिर्फ उसी Page के Elements पर होता हैं. जिस Page पर Style Rules को Declare किया गया हैं.
Inline Style Element Specific होती हैं, वहीं Internal Style Document Specific होती हैं. Internal CSS Style को Document के Header Section में Define किया जाता हैं. इसके लिए HTML Style Element का इस्तेमाल किया जाता हैं. Internal CSS को Add करने का तरीका इस प्रकार हैं.
<html>
<head>
<title>Internal CSS Demo</title>
<style type=”text/css”>
p {
color:orange;
}
</style>
</head>
<body>
</body>
</html>
External CSS Add करना
Web सिर्फ एक Page का नाम नही हैं. यह तो लाखों-करोडों Websites का एक सामुहिक स्थान हैं. और एक ही Website में दर्जनों Webpages होते हैं. इसलिए सभी Pages के लिए Style Rule Declare करना समय खपाने वाला कार्य बन जाता हैं.
यहीं CSS की असली ताकत का मालूम चलता हैं. आप पूरी Website (s) के लिए एक ही CSS File में Style Rule Declare कर सकते हैं. जी हाँ! आपने सही पढा. एक ही फाईल में संपूर्ण वेबसाईट के लिए Style Rule लिख सकते हैं.
External Style को हम एक अलग Document में Declare करते हैं. जिसे Style Document या Stylesheet कहते हैं. फिर इसे Link Element द्वारा वेबसाईट या वेबपेज में जोडा जाता हैं.
आप External Stylesheet को किसी भी नाम से सेव कर सकते हैं. CSS File का File Extension .css होता हैं. जिसे फाईल नाम के आगे लिखना पडता हैं. External CSS File को इस प्रकार बनाया जाता हैं.
body {
background: gray;
}
p {
color:orange;
font-size: 16px;
}
h1 {
font-size: 26px;
font-weight: bold;
text-decoration: underline;
}
अब आपकी External Stylesheet बनकर तैयार हो गई हैं. और जिस वेबपेज के साथ आप इसे जोडना चाहते हैं. उस वेबपेज के Header Section में Link Element द्वारा इस जोड दीजिए. और उस पेज पर इस Stylesheet में Declare Style Rules Apply हो जाएंगे. External CSS File को इस प्रकार जोडा जाता हैं.
<html>
<head>
<link type=”text/css” href=”filename.css”>
</head>
<body>
</body>
</html>
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Add करने का तरीका बताया हैं. आपने जाना कि HTML Document में CSS को कैसे Add किया जाता हैं. Inline, Internal और External Stylesheet के बारे में भी आपने जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
मनोज says
सर जी वो सायद link rel stylesheet (then)tyep होता है
TP Staff says
मनोज जी, ये अतिरिक्त Attribute होते है. इन्हे आप जोड़ भी सकते है और नहीं भी. ये ब्राउजर को अतिरिक्त जानकारी देने के उद्देश्य से इस्तेमाल होते है.
मनोज says
सर अभी भी अपका सुधार अधूरा है।
अपने example कोड मे अभी तक inline (internel लिखना था) ही लिखा हुवा है
और सर आपके एक्सटर्नल css का जो html मे लिंक करने के लिये जो कोड दिया है वो अधूरा या गलत है।एस्मे भी सुधार करे।
मै फिलहाल आपके tutorial ही पढ़ रहा हू कुछ दिनो से।।काफी अच्छा लगा बहुत कुछ सिखने को मिला।
धन्यवाद
TP Staff says
मनोज जी, इसे भी सुधार दिया गया है. एक बार फिर आपका शुक्रिया.
मनोज says
अपने एक्सटर्नल css को html मे लिंक करने का तरीका भी सायद गलत बता रखा है ऐसे मुझे लगता है
सायद ये सही है एक्सटर्नल CSS को फ़ाईल करने के लिये
TP Staff says
मनोज जी, एक्सटर्नल सीएसएस फाइल को इसी तरह लिंक किया जाता है.