Categories
CSS Programming

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

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

By TP Staff

लेखक: TP Staff

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

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

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

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

Leave a Reply

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