HTML Styles Kya Hain-What is HTML Styles :- जैसा की आप जानते हैं, की हमारे पिछले पोस्ट में , हमने HTML Styles के बेसिक के बारे में काफी अच्छे तरीके से बात की हैं, और कुछ प्रैक्टिकल उदहारण भी दिए हैं, अब आज के पोस्ट में हम कुछ और उदहारण के बारे में बात करेंगे, याद रखिये ये कोई छोटा टॉपिक नहीं हैं, इसको सीखने और समझने में समय लगेगा, और एक बात यहाँ पर लिखी चीजों को समझने का प्रयास करें, ना की कॉपी और पेस्ट, क्योकि अगर आप समझेंगे तो आप और भी अपने आप से लॉजिक को लिख सकते हैं, और एक सुन्दर HTML पेज का निर्माण कर सकते हैं, आप हमारे पुराने सभी, HTML से सम्बंधित blogs को, यहाँ से देख सकते हैं .
HTML Styles Kya Hain-What is HTML Styles :- आज के पोस्ट में हम देखेंगे, की कैसे Style (जहाँ पर height, width, display, background, text-align )आदि के बारे में लिखते हैं, और अपने पेज पर मौजूद शब्दो और पेज को भी सुन्दर बनाते हैं, उस Style की coding की जगह निर्धारित करना बहुत जरूरी हैं , आप इसे ऐसे समझे की जब आप एक या दो लाइन की coding लिखते हैं , तो आप उसे HTML पेज पर कही भी लिखे तो चलेगा , पर जब आप की coding बड़ी होती जाती हैं , मतलब की कई लाइन की coding , तो उसे मैनेज करना आसान नहीं होता हैं , और अगर आप की coding व्यवस्थित नहीं होगी , तो आप को coding के एरर(coding में उपस्थित गलतियों को error कहते हैं ) को ढ़ूढ़ने में काफी समय और मेहनत दोनों ही लगेगी . पर जब आप की coding व्यवस्थित होती हैं , तो ये आसान हो जाता हैं . और आप पलक झपकते ही code की गलतियों को पकड़ सकते हैं .
तो चलिए सुरु करते हैं, सबसे पहले तो ये समझना होगा की स्टाइल से सम्बंधित कोड को कहाँ लिखना हैं, तो उसका सिंटेक्स मैंने निचे दिए इमेज में दिखलाया हैं .
जैसा की आप इमेज में देख सकते हैं, की स्टाइल की coding, Head के अंदर की जाती हैं, और यही से आप अपने HTML elements के रंग , आकर , प्रकार को बदल सकते हैं .
अब हम निचे दिए हुए उदहारण को समझेंगे..
<!DOCTYPE html>
<html>
<head>
<style>
p:hover {
background-color: Yellow;
padding: 20px 35px;
text-align: center;
text-decoration: none;
}
h2 {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Aforapple.co.in-Online Learning Platform</h2>
<p style="color: red;font-size:200%;">HTML Style Example </p>
<p style="color: blue;font-size:300%;">HTML Style Example Blue</p>
<p style="color: black;font-size:400%;">HTML Style Example Black</p>
</body>
</html>
इस उदहारण में मैंने p:hover का उपयोग किया हैं, इसका मतलब होता हैं की जब आप p जो की एक HTML एलिमेंट हैं , उस पर अपना माउस ले जाएंगे तो, जो भी coding आप p:hover के अंदर लिखेंगे वो रन होगी, और आपको रिजल्ट दिखाई देगा .
p:hover coding के वजह से जब आप कर्सर को “HTML Style Example Blue” टेक्स्ट के ऊपर लाएंगे, तो उसका कलर बदल जाएगा और बैकग्राउंड पीले कलर का हो जायेगा ,क्योकि हमने p:hover में स्टाइल से सम्बंधित coding लिखी हैं, जो की बैकग्राउंड को पीला करती हैं.
जैसे ही आप ऊपर दिए हुए कोड को नोटपैड की सहायता से .html के नाम से सेव कर के, किसी भी ब्राउज़र पर ओपन या रन करेंगे , तो आप को निचे दिए हुए इमेज जैसा आउटपुट मिलेगा .
इसी तरीके से हम दूसरा उदाहरण देखेंगे, जिसमें की हम HTMLClass बनाएंगे, और फिर उसी क्लास को, हम उपयोग में ला कर, HTML पेज पर लिखे टेक्स्ट व पेज के बैकग्राउंड के कलर को बदलेंगे , जैसा की निचे दिए हुए उदहारण को देखें.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: Blue;
}
.HTMLClass{
height:400px;
width:1200px;
display:flex;
background:#fff;
}
h1{
text-align:center;
text-transform: uppercase;
color:White
}
h2{
text-decoration: underline;
color:White
}
}
</style>
</head>
<body>
<h2>Aforapple.co.in-Online Learning Platform</h2>
<br>
<h1> How to use Class </h1>
<div class="HTMLClass">
<p style="color: red;font-size:200%;">HTML Style Example </p>
<p style="color: blue;font-size:300%;">HTML Style Example Blue</p>
<p style="color: black;font-size:400%;">HTML Style Example Black</p>
</div>
</div>
</body>
</html>
अब आप जैसा की ऊपर दिए हुए कोड को देख सकते हैं, की मैंने “HTMLClass” का उपयोग <div class=”HTMLClass”> में किया हैं .
और इसी वजह से HTMLClass में लिखे हुए कोड <div class=”HTMLClass”> में इफेक्ट दिखला रहे हैं, अब अगर हम ऊपर दिए हुए कोड को रन करके देखेंगे, तो हमें निचे दिए हुए स्क्रीन जैसा आउटपुट या परिणाम मिलेगा .
तो आज हमने सीखा की, HTML Styles क्या होता हैं – HTML Styles को कैसे सीखें, Class को कैसे उपयोग में लाये, अब अगले पोस्ट में हम HTML Styles के कुछ और गुणों के बारे में बात करेंगे, और एक सुन्दर HTML पेज बनाने के बारे में बात करेंगे, और कुछ नया सीखेंगे.
थैंक यू।