• Skip to primary navigation
  • Skip to main content

  • होम
  • ट्युटोरियल
  • कैसे करें
  • आर्टिकल
  • करियर गाइड
  • समाचार
  • क्विज खेलें
  • Books

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

अंतिम सुधार November 10, 2021 लेखक TP Staff

इस Tutorial में हम आपको HTML Document में CSS Code Add करने का तरीका बताएंगे. सुविधा की दृष्टि के लिए इस Tutorial को छोटे-छोटे भागों में बांटा गया हैं. ताकि Tutorial का प्रत्येक भाग समझ में आ जाए.

Table of Content

  1. HTML Document में CSS Style Add कैसे करें?
    • Inline CSS
    • Internal CSS
    • External CSS
  2. आपने क्या सीखा?

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

लेख आपको पसंद आया?
👍👎

About TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Join TutorialPandit on Telegram
Free Computer Literacy Course

Reader Interactions

Comments

  1. मनोज says

    June 22, 2020 at 3:36 pm

    सर जी वो सायद link rel stylesheet (then)tyep होता है

    Reply
    • TP Staff says

      June 22, 2020 at 3:42 pm

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

      Reply
  2. मनोज says

    June 22, 2020 at 3:30 pm

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

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

    धन्यवाद

    Reply
    • TP Staff says

      June 22, 2020 at 3:39 pm

      मनोज जी, इसे भी सुधार दिया गया है. एक बार फिर आपका शुक्रिया.

      Reply
  3. मनोज says

    June 22, 2020 at 2:57 pm

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

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

    Reply
    • TP Staff says

      June 22, 2020 at 3:02 pm

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

      Reply
« Older Comments
Newer Comments »

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy
  • Advertise