 |
| HTML and CSS tutorial for beginners in English |
पिछले लेसन में हम ने radio बटन, चेक बॉक्स, और drop down list के बारे में सीखा।
आज हम CSS के बारे में सीखेंगे।
What is CSS?
CSS का मतलब होता है Cascading Style Sheets. इस का मतलब हम एक sheet बनाते हैं जिस में हम स्टाइल define कर सकते हैं। यह style हम हमारे वेब पेज के elements को दे सकते हैं। CSS style हम एक ही बार define करते हैं और बाद में हम यह स्टाइल elements को देते हैं। उदाहरण, हमें हमारे वेब साइट का heading साइट के सब pages में लाल कलर में, bold और centered चाहिए। तो हम जितने भी pages बनानेवाले हैं, हर एक पेज में यह दे सकते हैं। CSS या काम बहुत आसान करता है। एक CSS शीट बनाते हैं जिसमें यह स्टाइल दी हुई होती है। हम सिर्फ इस शीट का नाम हर एक पेज में देते हैं और यह स्टाइल हर एक पेज में आ जाती है। Cascading का मतलब है information successively pass करना।CSS का उपयोग पेज layout के लिए भी होता है। इस में हम यह बताते हैं की कौन सा element वेब पेज में कहाँ और कैसे डिस्प्ले करना है। उदाहरण के लिए हमें इमेज ऊपर चाहिए और उसके नीचे टेक्स्ट चाहिए या इमेज के पास और नीचे टेक्स्ट चाहिए वगैरह। इस से हम एक बहुत अच्छा दिखनेवाला और आकर्षक वेब पेज बना सकते है।
तो आप यह ठीक तरह से समझ लीजिये। HTML का उपयोग पेज के actual contents लिखने के लिए होता है। CSS का उपयोग उस content को अच्छी तरह से present करने के लिए होता है। CSS एक element के styling और layout में HTML की मदद करता है।
HTML में कई formatting और layout tags हैं जिनको HTML5 अब support नहीं करता है। इस लिए हमारे पेज impressive करने के लिए हमको CSS सीखना चाहिए।
JavaScript जैसी कुछ scripting languages भी हैं की जो अच्छा वेब पेज develop करने में काम आती है।
How to write CSS?
आज हम CSS के बारे में सीखेंगे। हम यह देखेंगे की CSS कैसा लिखते हैं। CSS statement के दो भाग होते हैं। १. Selector और २. Declaration.Selector में हम जिस element का style लिख रहे हैं उसका नाम दिया जाता है। Declaration में actual स्टाइल होता है। उदाहरण - element - h1 और इसकी स्टाइल है रेड कलर। हम यह ऐसा लिखते हैं। Selector के अलग अलग प्रकार होते हैं। हम उनको लेसन २२ में सीखनेवाले हैं।
<h1 {color:red;}>
हम इसे < और > में लिखते हैं। {color:red;} declaration है। हम इसको {और } में लिखते हैं। यहाँ "color" CSS property है और "red" इसकी value है। CSS property और उसकी value के बीच : देते हैं। ; देने पर declaration पूर्ण होता है। अगर हम h1 के लिए दो properties लिख रहे हैं तो उनके बीच में ; आता है।
CSS comment in Hindi
CSS में comment कैसा लिखते हैं?/*comment*/
/* और */ के बीच में जो भी लिखते हैं वह कॉमेंट होता है।
Methods of Writing CSS
CSS ३ तरह से लिखा जाता है।1. External CSS, 2. Internal CSS, and 3. Inline CSS
External CSS
हम आज external CSS के बारे में सीखेंगे।हम अपना स्क्रिप्ट लिखना शुरू करते हैं। एक नयी Notepad फाइल ओपन कीजिये। इस में Lesson-8 का टेक्स्ट कॉपी कीजिये।
पहले हमें एक external style sheet लिखनी पड़ेगी। इस के लिए दूसरा Notepad फाइल ओपन कीजिये। इस फाइल में नीचे दिया हुआ कॉड कॉपी कीजिये।
h1 {
color: red;
text-align:center
}
p {
color:blue;
}
इस कोड में हम ने पहले h1 element का स्टाइल लिखा है। इस का color red होना चाहिए और यह center में डिस्प्ले होना चाहिए। इस के बाद हमने paragraph element का स्टाइल लिखा है। Paragraph में टेक्स्ट नीले रंग में आना चाहिए।
 |
| आकृति २०-१ CSS code, CSS external style sheet |
हम ने बहुत simple कोड लिखा है। यह आप को आसानी से समझ में आएगा। अब इस फाइल को "style1.css" के नाम से save कीजिये। इस Notepad फाइल को close कीजिये। यह हमारा स्टाइल शीट हो गया। याद रखिये style sheet का extension ".css" होता है।
याद रखिये:
1. CSS फाइल simple Notepad में लिखा जाता है।
2. CSS फाइल को ".css" extension देकर save करते हैं।
3. CSS file में CSS declarations होते हैं। कोई भी HTML tags नहीं होते।
<head> के नीचे लिखिए -
<! Example of external CSS>
यह कॉमेंट है।
इस फाइल के <head> में </title> के बाद लिखिए -
<link rel="stylesheet" type="text/css" href="style1.css">
<link> tag का उपयोग HTML स्क्रिप्ट में use के हुई external CSS sheet का नाम देने के लिए होता है।
<link> tag के ३ attributes होते हैं।
१. "rel":
हमारा link किया हुआ document है "style1.css"। हम इसे "Lesson-20" में लिंक करनेवाले हैं। इस लिए link tag का उपयोग किया है। "rel" इन दो files का "relation" बताता है।
२. "type"
इस में लिंक किये हुए document का type दिया जाता है।
३. "href"
में लिंक किये हुए document का नाम दिया जाता है - "style1.css"।
हमने स्टाइल शीट में h1 का स्टाइल लिखा है। इस लिए हम ने पहले जो स्टाइल h1 के लिए दी थी वह निकालिये। "h1" tag में से style="color:blue;" डिलीट कीजिये।
Paragraph tag में से style="background-color:red;" डिलीट कीजिये।
तीसरा <p> से </p> डिलीट कीजिये।
अब इस फाइल को "Lesson-20" के नाम से save कीजिये। फिर इस फाइल को "Lesson-20.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति २०-२. पर क्लिक कीजिये।
 |
| आकृति २०-२. Link external CSS |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति २०-३ Style displayed in web page from external style sheet |
हमने "style1.css" में दिया हुआ स्टाइल डिस्प्ले हुआ है।
यह स्टाइल हम link tag का उपयोग करके वेब साइट के हर एक पेज में दे सकते हैं। पूरी वेब साइट develop करने के बाद अगर हम कलर बदलना चाहते हैं तो सिर्फ एक बार इस शीट में बदलना पड़ेगा, नया कलर पूरे वेब साइट में आ जायेगा।
Important Points:
१. CSS का मतलब है - Cascading Style Sheets.२. HTML से एक वेब पेज के contents लिखते हैं और CSS से elements को स्टाइल दी जाती है और उनका layout define किया जाता है।
३. CSS का उपयोग करने से coding बहुत आसान हो जाता है और इस से वेब पेज का management भी आसान हो जाता है।
४. CSS लिखने के तीन तरीके होते हैं - 1. External CSS, 2. Internal CSS, and 3. Inline CSS।
५. External CSS के लिए स्टाइल शीट simple Notepad में लिखी जाती है और इस को ".css" के नाम से save किया जाता है। इस फाइल के नाम को HTML प्रोग्राम में <link> tag में दिया जाता है।
लेसन १९ लेसन २०
