इस Tutorial में हम आपको HTML Document में CSS Code Add करने का तरीका बताएंगे. सुविधा की दृष्टि के लिए इस Tutorial को छोटे-छोटे भागों में बांटा गया हैं. ताकि Tutorial का प्रत्येक भाग समझ में आ जाए.
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 पर इसका कोई प्रभाव नही पडता हैं. नीचे उदाहरण देखें.
<p style=”color: orange;”>This is paragraph.</p>
ऊपर कोड को देखकर आप खुद जान सकते हैं कि यह कितना आसान हैं. बस आपको जिस 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 करने का तरीका इस प्रकार हैं.
<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 को इस प्रकार बनाया जाता हैं.
/* This is an External CSS File Created by: TutorialPandit.com */
अब आपकी External Stylesheet बनकर तैयार हो गई हैं. और जिस वेबपेज के साथ आप इसे जोडना चाहते हैं. उस वेबपेज के Header Section में Link Element द्वारा इस जोड दीजिए. और उस पेज पर इस Stylesheet में Declare Style Rules Apply हो जाएंगे. External CSS File को इस प्रकार जोडा जाता हैं.
<!DOCTYPE html> <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 आपके लिए उपयोगी साबित होगा.
सर अभी भी अपका सुधार अधूरा है।
अपने example कोड मे अभी तक inline (internel लिखना था) ही लिखा हुवा है
और सर आपके एक्सटर्नल css का जो html मे लिंक करने के लिये जो कोड दिया है वो अधूरा या गलत है।एस्मे भी सुधार करे।
मै फिलहाल आपके tutorial ही पढ़ रहा हू कुछ दिनो से।।काफी अच्छा लगा बहुत कुछ सिखने को मिला।
जी बहुत बहुत धन्यवाद सर जी,
सर जी हो सके तो HTML ,CSS के नये संस्करण पे tutorial लिखे।
और Java, C ++, पे भी आपके भाषा सरल और आसानी से समझने लायक है।
मनोज जी, आगे कोशिश करेंगे कि आपकी जरूरतों के हिसाब से कंटेट तैयार करें.
सर जी वो सायद link rel stylesheet (then)tyep होता है
मनोज जी, ये अतिरिक्त Attribute होते है. इन्हे आप जोड़ भी सकते है और नहीं भी. ये ब्राउजर को अतिरिक्त जानकारी देने के उद्देश्य से इस्तेमाल होते है.
सर अभी भी अपका सुधार अधूरा है।
अपने example कोड मे अभी तक inline (internel लिखना था) ही लिखा हुवा है
और सर आपके एक्सटर्नल css का जो html मे लिंक करने के लिये जो कोड दिया है वो अधूरा या गलत है।एस्मे भी सुधार करे।
मै फिलहाल आपके tutorial ही पढ़ रहा हू कुछ दिनो से।।काफी अच्छा लगा बहुत कुछ सिखने को मिला।
धन्यवाद
मनोज जी, इसे भी सुधार दिया गया है. एक बार फिर आपका शुक्रिया.
अपने एक्सटर्नल css को html मे लिंक करने का तरीका भी सायद गलत बता रखा है ऐसे मुझे लगता है
सायद ये सही है एक्सटर्नल CSS को फ़ाईल करने के लिये
मनोज जी, एक्सटर्नल सीएसएस फाइल को इसी तरह लिंक किया जाता है.
आपके ऑनलाइन क्लास से बहुत कुछ सिखने को मिला ।
धन्य्बाद
मनोज जी, आते रहिए सीखते रहिए.
आप इंटरनल css को inline css लिख कर confusen कर रहे है ।
कृप्या सुधार करे
मनोज जी, आपने सही गलती पकड़ी है. आपको हुई परेशानी के लिए हम क्षमा चाहेंगे. इसे सुधार दिया गया है. आपका शुक्रिया.
Very smart tutorial. I like it .