CSS का पूरा नाम है कैस्केडिंग स्टाइल शीट्स (Cascading Style Sheets) ।
CSS(Cascading Style Sheets) कैस्केडिंग स्टाइल शीट्स किसी HTML से बनाये गए वेबसाइट को सुंदर बनाता है जैसा इसका नाम में ही है Style Sheets मतलब ये वेबसाइट में स्टाइल ऐड करने के काम आता है ।
इस इमेज को देख कर आप यह समझ सकते हैं कि एचटीएमएल वह आधार है जिससे यह केक बना है और CSS वह मलाई है जो इस केक को सुंदर बनाता है।
CSS का कोई विकल्प नहीं है मतलब कि अगर आप चाहे या ना चाहे अपनी वेबसाइट को सुंदर बनाना है तो आपको सीएसएस का उपयोग अपने वेबसाइट में करना ही होगा ।
सीएसएस की विशेषताएं निम्नलिखित हैं :-
- CSS की सबसे बड़ी खासियत यह है कि हम एक बार लिखे सीएसएस कोड को अपने वेबसाइट में बार-बार उपयोग कर सकते हैं , मतलब बार-बार हमें एक ही कोड नहीं लिखना पड़ता है, जिससे समय की बचत होती है ।
- अगर हम सीएसएस के थोड़े से कोर्ट में परिवर्तन कर दें तो पूरे वेबसाइट का डिजाइन ही बदल जाता है जिससे हमें वेबसाइट को फिर से एक नया डिज़ाइन देने में बहुत आसानी होती है ।
- अगर हम चाहे तो सीएसएस कोड को html पेज के साथ भी लिख सकते हैं या चाहे तो एक अलग पेज बना कर भी हम उसमें सीएसएस कोड को लिख सकते हैं ।
CSS सीखने के लिए आपको दो चीजों की जरूरत पड़ती है पहला है Text-Editor (टेक्स्ट एडिटर) और दूसरा है Web-Browser (वेब ब्राउज़र) Text-Editor जैसे कि Notepad(नोटपेड) या Notepad++(नोटपेड प्लस प्लस) कोई भी टेक्स्ट एडिटर का उपयोग आप कर सकते हैं और Web-Browser जैसे कि mozilla firefox (मोज़िला फ़ायरफ़ॉक्स) , google chrome (गूगल क्रोम) या internet explorer( इंटरनेट एक्सप्लोरर) किसी भी वेब ब्राउज़र का उपयोग करके आप CSS सीख सकते हैं |
सीएसएस सीखना बहुत ही आसान है अगर आप कोशिश करते हैं तो सीएसएस को कुछ ही सप्ताह में बहुत अच्छे से सीख सकते हैं और सीएसएस की मदद से अपनी वेबसाइट को बहुत ही सुंदर बना सकते हैं ।
WRITING YOUR FIRST CSS CODE IN HINDI:-
CSS वेब डिजाइन /Web Design की दुनिया में एक क्रांति थी। CSS एक style की भाषा है जो किसी वेबसाइट में में रंग(colours), मार्जिन (margins), ऊंचाई(height), चौड़ाई(width), पृष्ठभूमि छवियों (background images) और कई अन्य चीजें को नियंत्रित करता है। इस पाठ में हम HTML से बने वेब पेज (Web Page) में css को जोड़ने का सबसे आसान तरीका सीखेंगे।
आप जानते हैं कि html का साधारण कोड कुछ इस प्रकार का होता है :-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Welcome To Web3Turorial.com</p>
</body>
</html>
अगर हमें इस html के कोड में सीएसएस का कोड लिखना है तो इसके लिए हमें <head> </head> टैग (Tag) के अंदर <style> </style> टैग लिखकर उसके अंदर सीएसएस का कोड लिख सकते हैं :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:green;
}
</style>
</head>
<body>
<p>Welcome To Web3Turorial.com</p>
</body>
</html>
अब आप ऊपर लिखे कोड को कॉपी करके अपने Text-Editor पर पेस्ट करिए , उसके बाद उसे test.html नाम देकर save करिए और फिर जब आप उस html पेज पर क्लिक करके उसे खोलेंगे तो आप देखेंगे की पुरे वेब पेज का Background Colour हरा (Green) हो चुका है |
इस तरह से बड़ी आसानी से हम CSS को वेबसाइट के साथ जोड़ सकते हैं | सीएसएस को html page के साथ जोड़ने के और भी कई सारे तरीके हैं जिन्हें हम बाद में सीखेंगे|
CSS वेब डिजाइन /Web Design की दुनिया में एक क्रांति थी। CSS एक style की भाषा है जो किसी वेबसाइट में में रंग(colours), मार्जिन (margins), ऊंचाई(height), चौड़ाई(width), पृष्ठभूमि छवियों (background images) और कई अन्य चीजें को नियंत्रित करता है। इस पाठ में हम HTML से बने वेब पेज (Web Page) में css को जोड़ने का सबसे आसान तरीका सीखेंगे।
आप जानते हैं कि html का साधारण कोड कुछ इस प्रकार का होता है :-
<!DOCTYPE html> <html> <head> </head> <body> <p>Welcome To Web3Turorial.com</p> </body> </html>
अगर हमें इस html के कोड में सीएसएस का कोड लिखना है तो इसके लिए हमें <head> </head> टैग (Tag) के अंदर <style> </style> टैग लिखकर उसके अंदर सीएसएस का कोड लिख सकते हैं :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:green;
}
</style>
</head>
<body>
<p>Welcome To Web3Turorial.com</p>
</body>
</html>
अब आप ऊपर लिखे कोड को कॉपी करके अपने Text-Editor पर पेस्ट करिए , उसके बाद उसे test.html नाम देकर save करिए और फिर जब आप उस html पेज पर क्लिक करके उसे खोलेंगे तो आप देखेंगे की पुरे वेब पेज का Background Colour हरा (Green) हो चुका है |
इस तरह से बड़ी आसानी से हम CSS को वेबसाइट के साथ जोड़ सकते हैं | सीएसएस को html page के साथ जोड़ने के और भी कई सारे तरीके हैं जिन्हें हम बाद में सीखेंगे|
इस तरह से बड़ी आसानी से हम CSS को वेबसाइट के साथ जोड़ सकते हैं | सीएसएस को html page के साथ जोड़ने के और भी कई सारे तरीके हैं जिन्हें हम बाद में सीखेंगे|
UNDERSTANDING CSS CODE IN HINDI:-
दोस्तों इस पाठ से हम CSS CODE को समझना शुरू करेंगे|
CSS का CODE तीन चीजो से मिलकर बना होता है
selector {property: value;}
selector :- selector HTML Tag या HTML Tag में लगाया गया कोई element जैसे की ID या Class हो सकता है |
ID या Class के बारे में मैं बाद में आपको बताऊंगा अभी आप इतना समझ लीजिए की HTML Tag ही selector होता है |
Property :- Property वह चीज है जिसके लिए हम CSS CODE लिखते हैं मतलब कि अगर किसी HTML Tag के पीछे का रंग पीला करना है तो Background Color (पीछे का रंग) Property हैं । क्योंकि यहां हम Background Color को बदलने के लिए CSS CODE लिखेंगे |
Value :- selector पर जितनी भी Property हम लगाते हैं या लगाना चाहते हैं उसकी कोई ना कोई Value होती है जैसे Background Color (पीछे का रंग) की Value Red , Green, Pink या कोई भी रंग का नाम हो सकता है|
उदाहरण:- मान लीजिए कि मुझे किसी वेबसाइट के पीछे का रंग लाल करना है तो इसका CSS Code निम्नलिखित तरीके का होगा :-
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {
background-color: red;
}
</style>
</HEAD>
<BODY>
</BODY>
</HTML>
[NOTE:- हमें जितना भी CSS कोड लिखना है उसे हम <style> </style> tag के अंदर ही लिख सकते हैं अगर उसके बाहर हम कोई CSS कोड लिखेंगे तो वह मान्य नहीं होगा | <style> </style> tag को हमेशा <head></head> tag के अंदर ही लिखना चाहिए अगर आप <head></head> tag के बाहर <style> को लिखेंगे तब भी CSS कोड तो ठीक से काम करेगा लेकिन यह CSS लिखने का सही तरीका नहीं है| ]
Property और value के बीच एक : का होना जरूरी है|
Value के बाद ; का होना जरूरी है |
Selector के बाद Property और value को { } के अंदर बंद होना जरूरी है |
दोस्तों इस पाठ से हम CSS CODE को समझना शुरू करेंगे|
CSS का CODE तीन चीजो से मिलकर बना होता है
selector {property: value;}
selector :- selector HTML Tag या HTML Tag में लगाया गया कोई element जैसे की ID या Class हो सकता है |
ID या Class के बारे में मैं बाद में आपको बताऊंगा अभी आप इतना समझ लीजिए की HTML Tag ही selector होता है |
Property :- Property वह चीज है जिसके लिए हम CSS CODE लिखते हैं मतलब कि अगर किसी HTML Tag के पीछे का रंग पीला करना है तो Background Color (पीछे का रंग) Property हैं । क्योंकि यहां हम Background Color को बदलने के लिए CSS CODE लिखेंगे |
Value :- selector पर जितनी भी Property हम लगाते हैं या लगाना चाहते हैं उसकी कोई ना कोई Value होती है जैसे Background Color (पीछे का रंग) की Value Red , Green, Pink या कोई भी रंग का नाम हो सकता है|
उदाहरण:- मान लीजिए कि मुझे किसी वेबसाइट के पीछे का रंग लाल करना है तो इसका CSS Code निम्नलिखित तरीके का होगा :-
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {
background-color: red;
}
</style>
</HEAD>
<BODY>
</BODY>
</HTML>
[NOTE:- हमें जितना भी CSS कोड लिखना है उसे हम <style> </style> tag के अंदर ही लिख सकते हैं अगर उसके बाहर हम कोई CSS कोड लिखेंगे तो वह मान्य नहीं होगा | <style> </style> tag को हमेशा <head></head> tag के अंदर ही लिखना चाहिए अगर आप <head></head> tag के बाहर <style> को लिखेंगे तब भी CSS कोड तो ठीक से काम करेगा लेकिन यह CSS लिखने का सही तरीका नहीं है| ]
Property और value के बीच एक : का होना जरूरी है|
Value के बाद ; का होना जरूरी है |
THE ELEMENT SELECTOR IN HINDI:-
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
p {
background-color:red;
Color:black;
}
</style>
</HEAD>
<BODY>
<p>Welcome To Web3tutorial.com </p>
<p>Learn To make website in hindi. </p>
</BODY>
</HTML>
[ NOTE:- color का उपयोग शब्द या वाक्य के रंग को बदलने के लिए होता है उदाहरण के लिए अगर आप किसी <p> tag के रंग को लाल करना चाहते हैं तो आपको लिखना होगा p{color:red;} और अगर आप पीला करना चाहते हैं तो आपको लिखना होगा p{color:yellow;}]
इस उदाहरण में आप देख सकते हैं कि जब हमने <p> tag का background-color:red’; कर दिया है दोनों जिससे <p> tag का पीछे का बैकग्राउंड कलर बदल गया है | अब मान लीजिए कि मैं सिर्फ पहले बाले <p> tag का बैकग्राउंड कलर को बदलना चाहता था लेकिन दोनों का रंग बदल गया |
यही नहीं अगर हम किसी HTML Tag पर कोई CSS लगते हैं तो जितने भी HTML Tag का उपयोग हम अपने Website में करने वाले हैं सब पर वही CSS के गुण समान रूप से लागू होते हैं |
ऐसे में तो समस्या हो जाएगी क्योंकि पूरे वेबसाइट में जितने भी <p> tag है सबका रंग एक ही बार में बदल जाएगा इसी समस्या के समाधान के लिए ID और CLASS कलेक्टर का उपयोग किया जाता है |
<HTML> <HEAD> <TITLE> New Document </TITLE> <style> p { background-color:red; Color:black; } </style> </HEAD> <BODY> <p>Welcome To Web3tutorial.com </p> <p>Learn To make website in hindi. </p> </BODY> </HTML>
[ NOTE:- color का उपयोग शब्द या वाक्य के रंग को बदलने के लिए होता है उदाहरण के लिए अगर आप किसी <p> tag के रंग को लाल करना चाहते हैं तो आपको लिखना होगा p{color:red;} और अगर आप पीला करना चाहते हैं तो आपको लिखना होगा p{color:yellow;}]
इस उदाहरण में आप देख सकते हैं कि जब हमने <p> tag का background-color:red’; कर दिया है दोनों जिससे <p> tag का पीछे का बैकग्राउंड कलर बदल गया है | अब मान लीजिए कि मैं सिर्फ पहले बाले <p> tag का बैकग्राउंड कलर को बदलना चाहता था लेकिन दोनों का रंग बदल गया |
यही नहीं अगर हम किसी HTML Tag पर कोई CSS लगते हैं तो जितने भी HTML Tag का उपयोग हम अपने Website में करने वाले हैं सब पर वही CSS के गुण समान रूप से लागू होते हैं |
ऐसे में तो समस्या हो जाएगी क्योंकि पूरे वेबसाइट में जितने भी <p> tag है सबका रंग एक ही बार में बदल जाएगा इसी समस्या के समाधान के लिए ID और CLASS कलेक्टर का उपयोग किया जाता है |
DIFFERENCE BETWEEN ID AND CLASS IN HINDI
ID selector और Class selector दोनों एक जैसे होते हैं लेकिन बस उनमें इतना सा फर्क है कि एक नाम के ID selector को हम एक webpage में सिर्फ एक बार ही Use कर सकते हैं लेकिन एक Class selector को हम एक प्रोजेक्ट में जितनी बार चाहे उतनी बार Use कर सकते हैं मतलब की ID selector को हम बार बार उपयोग नहीं कर सकते और Class selector को हम बार बार उपयोग कर सकते हैं ।
[NOTE:- ID selector के नाम Unique होते हैं इसीलिए जब हम किसी Web Page को <div> इसकी मदद से कई भागों में बांट देते हैं तब किसी एक भाग को Uniquely पकड़ने के लिए ID का उपयोग Javascript और jQuery में भी होता है | इस विषय पर हम JavaScript के Tutorial में विस्तार से पढ़ेंगे | ]
ID selector और Class selector के बारे में सबसे दिलचस्प बात यह है कि अगर हम चाहे तो एक ही HTML Tag के अंदर ID और CLASS दोनों को जोड़ सकते हैं और दोनों के अंदर अलग-अलग CSS के गुण लिख सकते हैं |
और ऐसा भी नहीं है कि अगर आपने किसी HTML Tag के अंदर ID selector या Class selector को जोड़ दिया तो आपको उसका उपयोग करना ही पड़ेगा आप चाहे तो उसे ऐसे ही छोड़ सकते हैं मतलब अगर आप चाहें तो किसी HTML Tag के अंदर ऐसे ही ID या CLASS जोड़कर उसे छोड़ सकते हैं | ऐसा करने से कोई फर्क नहीं पड़ता है |
अगले पाठ में हम ID selector और Class selector दोनों के बारे में विस्तार से जानेंगे |
ID selector और Class selector दोनों एक जैसे होते हैं लेकिन बस उनमें इतना सा फर्क है कि एक नाम के ID selector को हम एक webpage में सिर्फ एक बार ही Use कर सकते हैं लेकिन एक Class selector को हम एक प्रोजेक्ट में जितनी बार चाहे उतनी बार Use कर सकते हैं मतलब की ID selector को हम बार बार उपयोग नहीं कर सकते और Class selector को हम बार बार उपयोग कर सकते हैं ।
[NOTE:- ID selector के नाम Unique होते हैं इसीलिए जब हम किसी Web Page को <div> इसकी मदद से कई भागों में बांट देते हैं तब किसी एक भाग को Uniquely पकड़ने के लिए ID का उपयोग Javascript और jQuery में भी होता है | इस विषय पर हम JavaScript के Tutorial में विस्तार से पढ़ेंगे | ]
ID selector और Class selector के बारे में सबसे दिलचस्प बात यह है कि अगर हम चाहे तो एक ही HTML Tag के अंदर ID और CLASS दोनों को जोड़ सकते हैं और दोनों के अंदर अलग-अलग CSS के गुण लिख सकते हैं |
और ऐसा भी नहीं है कि अगर आपने किसी HTML Tag के अंदर ID selector या Class selector को जोड़ दिया तो आपको उसका उपयोग करना ही पड़ेगा आप चाहे तो उसे ऐसे ही छोड़ सकते हैं मतलब अगर आप चाहें तो किसी HTML Tag के अंदर ऐसे ही ID या CLASS जोड़कर उसे छोड़ सकते हैं | ऐसा करने से कोई फर्क नहीं पड़ता है |
CLASS SELECTOR IN HINDI:-
Class selector : जब हम नहीं चाहते कि सारे HTML Tag पर एक ही गुण समान रुप से लागू हो जाए तब हम Class Selector का उपयोग करते हैं |
हम Class Selector में CSS का गुण लगा देते हैं और जिस HTML Tag में उस Class Selector को जोड़ देते हैं उस tag में class का सारा गुण लग जाता है |
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.first {
background-color:red;
color:black;
}
</style>
</HEAD>
<BODY>
<p class="first">Welcome To Web3tutorial.com </p>
<p>Learn To make website in hindi. </p>
</BODY>
</HTML>
ऊपर के उदाहरण में आपने देखा कि हमने पहले वाले <p> Tag के साथ calss [<p class=”first”>] लगा दिया है इसी कारण सिर्फ उसी <p> Tag के पीछे का रंग बदला और बाकी दूसरे <p> Tag में कोई परिवर्तन नहीं हुआ | इस तरह से हम Class Selector का उपयोग कर सकते हैं |
लेकिन किसी HTML Tag का CSS लिखना और किसी Class Selector का CSS लिखने में थोड़ा सा अंतर है जब हम किसी HTML Tag का CSS लिखते है हैं तो हम सिर्फ उस Tag का नाम लिखकर { के अंदर CSS के Property और Value लिखना शुरु कर देते हैं लेकिन जब हम Class Selector में CSS Value लिखते हैं तब हमें उस Class के नाम के आगे DOT . चिन्ह लगाना होता है तभी उस क्लास में लिखे CSS के गुण मान्य होते है |
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.myclass {
color:green;
text-align:center;
}
</style>
</HEAD>
<BODY>
<p class="myclass">Welcome To Web3tutorial.com </p>
<h1 class="myclass">HTML In Hindi By web3tutorial.com </h1>
<h5 class="myclass">HTML In Hindi By web3tutorial.com </h5>
<p>Learn To make website in hindi. </p>
</BODY>
</HTML>
[NOTE :- text-align:center; की मदद से हम किसी शब्द या वाक्य को Web-Page के बीच में लिख सकते हैं जब आप Code को चला कर देखेंगे तो खुद समझ जाएंगे | ]
ऊपर के उदाहरण में आपने देखा कि हमने myclass नाम के एक Class को किस तरह से DOT . चिह्न की मदद से Define किया है और एक ही नाम के Class को एक <p> Tag के अंदर , <h1> Tag और <h6> Tag के अंदर Use किया है |
Class selector : जब हम नहीं चाहते कि सारे HTML Tag पर एक ही गुण समान रुप से लागू हो जाए तब हम Class Selector का उपयोग करते हैं |
हम Class Selector में CSS का गुण लगा देते हैं और जिस HTML Tag में उस Class Selector को जोड़ देते हैं उस tag में class का सारा गुण लग जाता है |
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.first {
background-color:red;
color:black;
}
</style>
</HEAD>
<BODY>
<p class="first">Welcome To Web3tutorial.com </p>
<p>Learn To make website in hindi. </p>
</BODY>
</HTML>
ऊपर के उदाहरण में आपने देखा कि हमने पहले वाले <p> Tag के साथ calss [<p class=”first”>] लगा दिया है इसी कारण सिर्फ उसी <p> Tag के पीछे का रंग बदला और बाकी दूसरे <p> Tag में कोई परिवर्तन नहीं हुआ | इस तरह से हम Class Selector का उपयोग कर सकते हैं |
लेकिन किसी HTML Tag का CSS लिखना और किसी Class Selector का CSS लिखने में थोड़ा सा अंतर है जब हम किसी HTML Tag का CSS लिखते है हैं तो हम सिर्फ उस Tag का नाम लिखकर { के अंदर CSS के Property और Value लिखना शुरु कर देते हैं लेकिन जब हम Class Selector में CSS Value लिखते हैं तब हमें उस Class के नाम के आगे DOT . चिन्ह लगाना होता है तभी उस क्लास में लिखे CSS के गुण मान्य होते है |
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.myclass {
color:green;
text-align:center;
}
</style>
</HEAD>
<BODY>
<p class="myclass">Welcome To Web3tutorial.com </p>
<h1 class="myclass">HTML In Hindi By web3tutorial.com </h1>
<h5 class="myclass">HTML In Hindi By web3tutorial.com </h5>
<p>Learn To make website in hindi. </p>
</BODY>
</HTML>
[NOTE :- text-align:center; की मदद से हम किसी शब्द या वाक्य को Web-Page के बीच में लिख सकते हैं जब आप Code को चला कर देखेंगे तो खुद समझ जाएंगे | ]
ID SELECTOR IN HINDI:-
ID SELECTOR :-
हम Class Selector में CSS का गुण लगा देते हैं और जिस HTML Tag में उस Class Selector को जोड़ देते हैं उस tag में class का सारा गुण लग जाता है |
लेकिन अगर कभी ऐसी परिस्थिति उत्पन्न हो जाए कि हमें सिर्फ किसी एक HTML Tag का CSS लिखना हो उदाहरण के लिए मान लीजिए कि हमें किसी <p> Tag का CSS लिखना है ऐसे में हम ID Selector का यूज़ करते हैं |हम किसी एक नाम की ID Selector का उपयोग अपने Web Page में सिर्फ एक बार ही कर सकते हैं मतलब की हम एक ही नाम की ID Selector का उपयोग एक ही Web Page पर बार-बार नहीं कर सकते |
नीचे वाला उदाहरण देखिए
<html>
<head>
<style>
#first {
text-align: right;
color: red;
}
</style>
</head>
<body>
<p id="first">Hello World! Welcome To web3tutorial.com</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
[NOTE:- text-align: right; का उपयोग किसी शब्द या वाक्य को Web Page के दाहिने भाग में लिखने के लिए होता है | ]
ऊपर के उदाहरण में आपने देखा कि हमने किस तरह से एक first नाम का ID बनाया और <p> Tag के अंदर जोड़ दिया |
लेकिन आपने देखा होगा कि जब हमने first नाम के ID पर CSS Property और Value लिखे तब first नाम के ID के सामने हमने एक # चिन्ह का प्रयोग किया है | जब हम किसी ID का CSS लिखते हैं तब हमें उस ID के नाम के आगे # चिन्ह का प्रयोग करना होता है तभी उस ID में लिखे CSS के code मान्य होंगे |
<html>
<head>
<style>
#first {
text-align: center;
font-size:25px;
color: red;
}
</style>
</head>
<body>
<p id="first">Hello World! Welcome To web3tutorial.com</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
[NOTE :- font-size नाम के CSS Properties का उपयोग हम किसी शब्द या वाक्य के SIZE को बढ़ाने के लिए करते हैं |]
हम Class Selector में CSS का गुण लगा देते हैं और जिस HTML Tag में उस Class Selector को जोड़ देते हैं उस tag में class का सारा गुण लग जाता है |
लेकिन अगर कभी ऐसी परिस्थिति उत्पन्न हो जाए कि हमें सिर्फ किसी एक HTML Tag का CSS लिखना हो उदाहरण के लिए मान लीजिए कि हमें किसी <p> Tag का CSS लिखना है ऐसे में हम ID Selector का यूज़ करते हैं |हम किसी एक नाम की ID Selector का उपयोग अपने Web Page में सिर्फ एक बार ही कर सकते हैं मतलब की हम एक ही नाम की ID Selector का उपयोग एक ही Web Page पर बार-बार नहीं कर सकते |
नीचे वाला उदाहरण देखिए
<html>
<head>
<style>
#first {
text-align: right;
color: red;
}
</style>
</head>
<body>
<p id="first">Hello World! Welcome To web3tutorial.com</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
[NOTE:- text-align: right; का उपयोग किसी शब्द या वाक्य को Web Page के दाहिने भाग में लिखने के लिए होता है | ]
ऊपर के उदाहरण में आपने देखा कि हमने किस तरह से एक first नाम का ID बनाया और <p> Tag के अंदर जोड़ दिया |
ऊपर के उदाहरण में आपने देखा कि हमने किस तरह से एक first नाम का ID बनाया और <p> Tag के अंदर जोड़ दिया |
लेकिन आपने देखा होगा कि जब हमने first नाम के ID पर CSS Property और Value लिखे तब first नाम के ID के सामने हमने एक # चिन्ह का प्रयोग किया है | जब हम किसी ID का CSS लिखते हैं तब हमें उस ID के नाम के आगे # चिन्ह का प्रयोग करना होता है तभी उस ID में लिखे CSS के code मान्य होंगे |
<html>
<head>
<style>
#first {
text-align: center;
font-size:25px;
color: red;
}
</style>
</head>
<body>
<p id="first">Hello World! Welcome To web3tutorial.com</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
CSS COMMENTS IN HINDI:-
CSS COMMENTS :-
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello World!</p>
<p>Welcome To Web3tutorial.com</p>
</body>
</html>
आप ऊपर लिखे Code को पहले Copy करिए उसके बाद अपने Text Editor पर Past करिए उसके बाद इस Code को कोई नाम देकर .html फॉर्मेट में Save करिए | उसके बाद इसे अपने ब्राउज़र पर खोलिए आप देखेंगे कि /* */ इन चिन्हों के अंदर लिखे वाक्य आपको अपने कंप्यूटर के स्क्रीन पर दिखाई नहीं दे रहे हैं इसका कारण यह है कि इसके अंदर लिखे वाक्य को Web Browser नहीं पकड़ता है और ना ही CSS के Output में इसका कोई प्रभाव पड़ता है |
/* */ इन चिन्हों के अंदर लिखे वाक्य को कॉमेंट (Comment) कहते हैं |
कॉमेंट (Comment) का मुख्य उपयोग CSS के Code को की व्याख्या करने के लिए किया जाता है | मतलब की आपने जो CODE लिखा है आप अगर चाहते हैं कि आप उसकी व्याख्या करें जैसे की इस कोड का काम क्या है या इस कोड को आप कहां उपयोग करना चाहते हैं इत्यादि बातें तो आप कॉमेंट के अंदर लिख सकते है |
कॉमेंट (Comment) के अंदर आप अपना नाम भी लिख सकते हैं ताकि लोगों को पता चले कि इस CSS CODE को आपने लिखा है |
[NOTE :- HTML में Comment लिखने का तरीका अलग है और CSS में कॉमेंट (Comment) लिखने का तरीका अलग है इसलिए अगर आप HTML में Comment लिखना चाहते हैं तो आप भी इस तरीके का इस्तेमाल नहीं कर सकते हैं | /* */ इन चिन्हों के अंदर कॉमेंट (Comment) आप <style> </style> tag के अंदर लिख सकते हैं | ]
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello World!</p>
<p>Welcome To Web3tutorial.com</p>
</body>
</html>
आप ऊपर लिखे Code को पहले Copy करिए उसके बाद अपने Text Editor पर Past करिए उसके बाद इस Code को कोई नाम देकर .html फॉर्मेट में Save करिए | उसके बाद इसे अपने ब्राउज़र पर खोलिए आप देखेंगे कि /* */ इन चिन्हों के अंदर लिखे वाक्य आपको अपने कंप्यूटर के स्क्रीन पर दिखाई नहीं दे रहे हैं इसका कारण यह है कि इसके अंदर लिखे वाक्य को Web Browser नहीं पकड़ता है और ना ही CSS के Output में इसका कोई प्रभाव पड़ता है |
/* */ इन चिन्हों के अंदर लिखे वाक्य को कॉमेंट (Comment) कहते हैं |
कॉमेंट (Comment) का मुख्य उपयोग CSS के Code को की व्याख्या करने के लिए किया जाता है | मतलब की आपने जो CODE लिखा है आप अगर चाहते हैं कि आप उसकी व्याख्या करें जैसे की इस कोड का काम क्या है या इस कोड को आप कहां उपयोग करना चाहते हैं इत्यादि बातें तो आप कॉमेंट के अंदर लिख सकते है |
कॉमेंट (Comment) के अंदर आप अपना नाम भी लिख सकते हैं ताकि लोगों को पता चले कि इस CSS CODE को आपने लिखा है |
INLINE,INTERNAL,EXTERNAL CSS IN HINDI:-
हम 3 तरीके से CSS Code को HTML Page में जोड़ सकते हैं Inline, Internal , और External
Inline:- इस तरीके में हम किसी HTML Tag के साथ Style Attribute लिखकर उसमें सीएसएस Code को जोड़ते हैं |
Internal :- इस तरीके में हम <head> Tag के अंदर <style></style> Tag लिखकर उसमें सीएसएस Code लिखते है ।
External :- इस तरीके में हम किसी बाहरी CSS फाइल में सारा CSS का कोड लिखते हैं और उस फाइल को HTML पेज के साथ जोड़ देते हैं |
चलिए अब इन तीनों तरीकों को उदाहरण के साथ देखते हैं मान लीजिए कि मैं चाहता हूँ की किसी Web Page के पीछे का रंग हरा हो जाए अब इस काम के लिए मुझे जो CSS Code लिखना है उसे मैं तीन अलग अलग तरीके से लिखूंगा |
हम 3 तरीके से CSS Code को HTML Page में जोड़ सकते हैं Inline, Internal , और External
Inline:- इस तरीके में हम किसी HTML Tag के साथ Style Attribute लिखकर उसमें सीएसएस Code को जोड़ते हैं |
Internal :- इस तरीके में हम <head> Tag के अंदर <style></style> Tag लिखकर उसमें सीएसएस Code लिखते है ।
External :- इस तरीके में हम किसी बाहरी CSS फाइल में सारा CSS का कोड लिखते हैं और उस फाइल को HTML पेज के साथ जोड़ देते हैं |
चलिए अब इन तीनों तरीकों को उदाहरण के साथ देखते हैं मान लीजिए कि मैं चाहता हूँ की किसी Web Page के पीछे का रंग हरा हो जाए अब इस काम के लिए मुझे जो CSS Code लिखना है उसे मैं तीन अलग अलग तरीके से लिखूंगा |
Inline CSS Method :-
<html>
<body style="background-color:green;">
<h1 style="color:white;" >Welcome To Web3tutorial.com</h1>
</body>
</html>
ऊपर के Code में आप देख सकते हैं कि किस तरह से हमने <body> tag के साथ style Attribute जोड़कर CSS कोड लिखा है | इस तरीके से CSS कोड लिखने को हम इन Inline CSS कोड कहते हैं |
<html> <body style="background-color:green;"> <h1 style="color:white;" >Welcome To Web3tutorial.com</h1> </body> </html>
ऊपर के Code में आप देख सकते हैं कि किस तरह से हमने <body> tag के साथ style Attribute जोड़कर CSS कोड लिखा है | इस तरीके से CSS कोड लिखने को हम इन Inline CSS कोड कहते हैं |
Internal CSS Method:-
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:green;}
h1{color: blue;}
p{color: red;}
</style>
</head>
<body>
<h1>web3tutorial.com</h1>
<p>Learn Web Designing In Hindi.</p>
</body>
</html>
ऊपर के Code में आप देख सकते हैं कि किस तरह से हमने <head> tag के अंदर <style > tag लिखकर उसके अंदर CSS कोड लिखा है | इस तरीके से CSS कोड लिखने को हम इन Internal CSS Code कहते हैं |
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:green;}
h1{color: blue;}
p{color: red;}
</style>
</head>
<body>
<h1>web3tutorial.com</h1>
<p>Learn Web Designing In Hindi.</p>
</body>
</html>
ऊपर के Code में आप देख सकते हैं कि किस तरह से हमने <head> tag के अंदर <style > tag लिखकर उसके अंदर CSS कोड लिखा है | इस तरीके से CSS कोड लिखने को हम इन Internal CSS Code कहते हैं |
External CSS Method:-
External CSS लिखने के लिए हमें एक अलग से CSS फाइल बनाना पड़ता है |
body{
background-color:green;
}
ऊपर लिखे कोड को Copy करके अपने Text-Editor जैसे की Notepad++ पर पेस्ट करिए और उससे style.css नाम से SAVE करीये |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome To web3tutorial.com</h1>
</body>
</html>
ऊपर लिखे कोड को Copy करके अपने Text-Editor जैसे की Notepad++ पर पेस्ट करिए और उससे index.html नाम से SAVE करीये | याद रखें index.html पेज को उसी जगह पर Save करें जहाँ पर अपने style.css को रखा है | मतलब कि अगर आपने अपने Desktop के ऊपरstyle.css को Save किया है तो index.html पेज को भी अपने Desktop के ऊपर ही Save करिए |
ऊपर के कोड में आप देख सकते है की हमने <head></head> Tag के अंदर <link rel=”stylesheet” href=”styles.css”> कोड लिखा है इस कोड के कारण ही style.css पेज index.html से जुड़ पाया है ।
External CSS लिखने के लिए हमें एक अलग से CSS फाइल बनाना पड़ता है |
body{
background-color:green;
}
ऊपर लिखे कोड को Copy करके अपने Text-Editor जैसे की Notepad++ पर पेस्ट करिए और उससे style.css नाम से SAVE करीये |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome To web3tutorial.com</h1> </body> </html>
ऊपर लिखे कोड को Copy करके अपने Text-Editor जैसे की Notepad++ पर पेस्ट करिए और उससे index.html नाम से SAVE करीये | याद रखें index.html पेज को उसी जगह पर Save करें जहाँ पर अपने style.css को रखा है | मतलब कि अगर आपने अपने Desktop के ऊपरstyle.css को Save किया है तो index.html पेज को भी अपने Desktop के ऊपर ही Save करिए |
ऊपर के कोड में आप देख सकते है की हमने <head></head> Tag के अंदर <link rel=”stylesheet” href=”styles.css”> कोड लिखा है इस कोड के कारण ही style.css पेज index.html से जुड़ पाया है ।
0 Comments