WhatsApp Telegram
WhatsApp Group Join Now
Telegram Group Join Now
WhatsApp Channel Join Now

HTML Document में CSS Code Add करने की पूरी जानकारी हिंदी में.

इस 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 कर सकते हैं.

  1. Inline CSS
  2. Internal CSS
  3. 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 करने का तरीका इस प्रकार हैं.

<!DOCTYPE html>
<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 को इस प्रकार बनाया जाता हैं.

/* This is an External CSS File Created by: TutorialPandit.com */

 

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 को इस प्रकार जोडा जाता हैं.

<!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 आपके लिए उपयोगी साबित होगा.

#BeDigital

Categories CSS

13 thoughts on “HTML Document में CSS Code Add करने की पूरी जानकारी हिंदी में.”

  1. जी बहुत बहुत धन्यवाद सर जी,
    सर जी हो सके तो HTML ,CSS के नये संस्करण पे tutorial लिखे।
    और Java, C ++, पे भी आपके भाषा सरल और आसानी से समझने लायक है।

    Reply
    • मनोज जी, आगे कोशिश करेंगे कि आपकी जरूरतों के हिसाब से कंटेट तैयार करें.

      Reply
    • मनोज जी, ये अतिरिक्त Attribute होते है. इन्हे आप जोड़ भी सकते है और नहीं भी. ये ब्राउजर को अतिरिक्त जानकारी देने के उद्देश्य से इस्तेमाल होते है.

      Reply
  2. सर अभी भी अपका सुधार अधूरा है।
    अपने example कोड मे अभी तक inline (internel लिखना था) ही लिखा हुवा है
    और सर आपके एक्सटर्नल css का जो html मे लिंक करने के लिये जो कोड दिया है वो अधूरा या गलत है।एस्मे भी सुधार करे।

    मै फिलहाल आपके tutorial ही पढ़ रहा हू कुछ दिनो से।।काफी अच्छा लगा बहुत कुछ सिखने को मिला।

    धन्यवाद

    Reply
  3. अपने एक्सटर्नल css को html मे लिंक करने का तरीका भी सायद गलत बता रखा है ऐसे मुझे लगता है

    सायद ये सही है एक्सटर्नल CSS को फ़ाईल करने के लिये

    Reply
    • मनोज जी, एक्सटर्नल सीएसएस फाइल को इसी तरह लिंक किया जाता है.

      Reply
  4. आपके ऑनलाइन क्लास से बहुत कुछ सिखने को मिला ।
    धन्य्बाद

    Reply
  5. आप इंटरनल css को inline css लिख कर confusen कर रहे है ।
    कृप्या सुधार करे

    Reply
    • मनोज जी, आपने सही गलती पकड़ी है. आपको हुई परेशानी के लिए हम क्षमा चाहेंगे. इसे सुधार दिया गया है. आपका शुक्रिया.

      Reply

Leave a Comment

Join WhatsApp Channel