 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में स्वागत है। आज हम लेसन २१ सीखेंगे।
पिछले लेसन में हम ने देखा की CSS क्या होता है। हम ने external CSS का उपयोग करना सीखा।
आज हम internal CSS और inline CSS सीखेंगे।
Internal CSS and Inline CSS
Internal CSS: इस का उपयोग एक वेब पेज में स्टाइल देने के लिए होता है। इस के लिए head में CSS स्टाइल को लिखा जाता है। इस स्टाइल को HTML script में अलग अलग जगह दे सकते है।
Inline CSS: इस approach में CSS स्टाइल जिस element को स्टाइल देने का है उसी में दिया जाता है।तो इन दो तरीकों को आज हम समझ लेते हैं।
Internal CSS
हम हमारे प्रोग्राम में internal CSS लिखेंगे।एक नयी Notpad file ओपन कीजिये। इस में lesson-20 का पूरा कोड कॉपी कीजिये।इस में <head> के नीचे कॉमेंट लिखिए:
<! Example of Internal CSS>
हमने पहले दिया हुआ <link> tag डिलीट कीजिये। यह tag हमने external CSS के लिए दिया था।
अब </title> के नीचे लिखिए -
<style>
<style> का उपयोग CSS स्टाइल लिखने के लिए होता है। इस के नीचे हम CSS लिखेंगे।
h1 {
color: red;
text-align:center
}
body {
color:blue;
}
इस स्टाइल को हमने हमारे Lesson-२० में दिया था। फरक इतना ही है की Lesson-20 में हमने इस अलग css फाइल में save किया था। Internal CSS के लिए हम इसे HTML के head में दे रहे हैं। हमने यह कोडिंग पिछले लेसन में सीखा है। आप "style1.css" से यह कॉपी कर सकते हैं। Style को क्लोज कीजिये - </style>।
हमारे फाइल को "Lesson-21-1" और "Lesson-21-1.html" के नाम से save कीजिये। नीचे दी हुई आकृती देखिये। Source कोड की PDF फाइल देखने के लिए आकृति २१-१. पर क्लिक कीजिये।
 |
| आकृति २१-१. Internal CSS, CSS style |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति २१-२ Output of internal CSS |
Inline CSS
अब हम inline CSS सीखेंगे। Lesson-21-1 को क्लोज कीजिये।एक नयी Notepad file ओपन कीजिये। इस में "Lesson-08" का पूरा कोड कॉपी कीजिये। <head> के नीचे कॉमेंट लिखिए।
<! Example of inline CSS>
अब इस में कुछ भी बदलने की जरूरी नहीं है। आप सिर्फ concept समझ लीजिये। इस का कोड नीचे दिखाया है। Source कोड की PDF फाइल देखने के लिए आकृति २१-३. पर क्लिक कीजिये।
 |
| आकृति २१-३. Inline CSS |
इस कोड में दो inline CSS हैं। पहला
<h1 style="color:Blue;">
और दूसरा
<p style="background-color:red;">
इन में CSS स्टाइल element के tags में ही दी है। इस लिए इनको inline CSS कहते हैं।
इस फाइल को "Lesson-21-2" और "Lesson-21-2.html" के नाम से save कीजिये।
 |
| आकृति २१-४ Output of inline CSS |
HTML document पर डबल क्लिक कीजिये। आउटपुट में हमें हुई स्टाइल आयी है।
अब हमने CSS लिखने के तीन प्रकार सीखे हैं।
Important Points:
१. Internal CSS के लिए स्टाइल head में लिखी जाती है। इस स्टाइल को बाद में body में दे सकते हैं। बाद में अगर elements की property चेंज करनी हो तो स्टाइल में केवल एक जगह पर चेंज करना पड़ेगा। जहाँ जहाँ यह स्टाइल दी है वहाँ चेंज हो जाएगा।2. Inline CSS element के opening tag में दी जाती है। इस लिए स्टाइल केवल उसी element में आ जाती है।
लेसन २० लेसन २२
