Sunrise Computer Classes: How to Add CSS Style in HTML (In Hindi)

How to Add CSS in HTML (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 का प्रयोग किया जाता हैं।

<!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 की असली ताकत का मालूम चलता हैं। आप पूरी Websites के लिए एक ही CSS File में Style Rule Declare कर सकते हैं। External Style को हम एक अलग Document में Declare करते हैं। जिसे Style Document या Style sheet कहते हैं। फिर इसे Link Element द्वारा वेबसाईट या वेबपेज में जोडा जाता हैं।

CSS File का File Extension .css होता हैं।

/* This is an External CSS File Created by: SunriseComputer.com */
body {
background: yellow;
}
p {
color:orange;
font-size: 16px;
}
h1 {
font-size: 26px;
font-weight: bold;
text-decoration: underline;
}

अब जिस वेबपेज के साथ इसे जोडना चाहते हैं। उस वेबपेज के Header Section में Link Element द्वारा जोड़ा जा सकता हैं। और उस पेज पर इस Stylesheet में Declare Style Rules Apply हो जाएंगे।

<!DOCTYPE html>
<html>
<head>
<link type=”text/css” href=”filename.css”></head>
<body>
</body>
</html>

<<Prev || Next >>

For Any Doubt Clear on Telegram Discussion Group

Join Us On Social Media

For Any Query @8604799387