इस लेख मे हम आपको HTML Document मे CSS Code को कैसे add किया जाता है वो बतायेंगे। और हम कितने तरीके से CSS को add कर सकते है उसके बारे मे बात करेंगे।
How to add CSS in HTML in Hindi
HTML Document मे CSS code को तीन प्रकार से add कर सकते है।
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS को Style attribute से declare किया जाता है। Style attribute को हम HTML Element के साथ लिखते है।
जिस element के साथ style attribute को declare करते है उसी element पर style rule apply होता है। अन्य elements पर इसका कोई प्रभाव नहीं पड़ता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h1 style="color:orange;">This is a heading</h1> <p style="color:red;">How to add CSS in HTML</p> </body> </html
Internal CSS
किसी particular page के लिए Internal CSS को लिखा जाता है। जिस page पर style rule को apply किया है उसी page पर Internal CSS का effect होता है।
Internal CSS को Header section मे define किया जाता है। Internal CSS का effect सिर्फ उसी page पर होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
margin-left: 50px;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>How to add CSS in HTML</p>
</body>
</html>
External CSS
एक ही Website मे बहोत सारे Web pages होते है। इसलिए सभी Pages के लिये style rule को apply करने का काम time को बर्बाद करने जैसा है।
इसलिए External CSS का इस्तेमाल करके एक ही file मे सम्पूर्ण website के लिये style rule लिख सकते है। यही CSS की असली ताकत है।
External CSS को हम एक अलग document मे declare करते है जिसे style sheet कहते है। और इसे link element के द्वारा HTML के साथ जोड़ा जाता है।
आप External style sheet को किसी भी name से save कर सकते है और इस file का extension .css होता है।
उदाहरण
stylename. css
h1 {
color: orange;
margin-left: 50px;
}
p{
color: red;
}
अब यहा stylename.css के name से external sheet तैयार हो गई है। आप कोई भी name से external sheet को save कर सकते है। अब इस external sheet को header section मे link element का इस्तेमाल करके web page के साथ जोड़ दीजिये। external CSS को इस प्रकार से जोड़ा जाता है।
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylename.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
यहा आपने यह सीखा की कैसे CSS को web page के साथ जोड़ा है। और कितने प्रकार से जोड़ा जाता है। CSS को web page के साथ जोड़ने के लिये ज़्यादातर external CSS का इस्तेमाल होता है। यहा आपने inline, internal और external stylesheet के बारे मे सीखा। अगर अभी भी आपके मन मे कोई भी सवाल है तो आप हमे नीचे comment box मे बता सकते है।
Next: CSS Comments in Hindi