HTML Style Attribute: रंग, फ़ॉन्ट साइज़ और अलाइनमेंट
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
style attribute आपको किसी HTML element पर सीधे CSS जोड़ने देता है। इसे inline styling कहा जाता है। यह एक element का रूप बदलने का सबसे तेज़ तरीका है, और सीखने के लिए बेहतरीन है, क्योंकि आप परिणाम तुरंत देखते हैं।
आप क्या बदल सकते हैं
- Text का रंग:
style="color: red;" - Background का रंग:
style="background-color: yellow;" - Font का आकार:
style="font-size: 20px;" - Font का परिवार:
style="font-family: Arial;" - Alignment:
style="text-align: center;"
हर style property: value; के रूप में लिखी जाती है और कई styles को semicolons से अलग किया जाता है: style="color: white; background-color: navy; font-size: 18px;"।
याद रखने की तरकीब: हर नियम एक ही तरह से लिखा जाता है — property: value; — गुण, दो बिंदु, मान, अर्धविराम।
कब इस्तेमाल करें — और कब नहीं
Inline styles त्वरित प्रयोगों और एक बार के बदलावों के लिए अच्छे हैं। लेकिन अगर आपके पेज के दस elements को एक जैसा रूप चाहिए, तो वही style दस बार लिखना बर्बादी है। उसके लिए <style> block या अलग CSS file है — दोनों आप HTML CSS वाले पाठ में सीखेंगे।
red), hex codes (#e13611) या rgb values (rgb(225, 54, 17)) के रूप में लिखा जा सकता है। Hex codes आपको सटीक नियंत्रण देते हैं।style attribute क्या है
style attribute आपको एक ही element पर CSS नियम जोड़ने देता है। CSS वह भाषा है जो रूप नियंत्रित करती है — रंग, fonts, आकार, spacing। Style attribute CSS आज़माने का सबसे तेज़ तरीका है: आप नियम सीधे tag के अंदर लिखते हैं, और browser उन्हें सिर्फ उस element पर लागू करता है।
आम CSS properties
| Property | Value | विवरण |
|---|---|---|
color | एक रंग | Text का रंग। |
background-color | एक रंग | Text के पीछे का रंग। |
font-size | जैसे 20px | Text कितना बड़ा है। |
font-family | जैसे Arial | Text किस font का इस्तेमाल करता है। |
text-align | left, center, right | Text अपनी line में कहाँ बैठता है। |
हर नियम property: value; के रूप में लिखा जाता है, और नियमों को semicolons से अलग किया जाता है। यहाँ वही paragraph दो तरीकों से style किया गया है:
<p style="color: red;">Red text.</p> <p style="color: blue; font-size: 20px;">Big blue text.</p>
style attribute हर HTML element पर काम करता है — इसे global attribute कहा जाता है। लेकिन यह सिर्फ उस एक element को style करता है। अगर दस paragraphs को एक ही रंग चाहिए, तो आपको वही style दस बार लिखना होगा।आम गलतियाँ
- दो नियमों के बीच semicolon भूल जाना — तब दूसरा नियम नज़रअंदाज़ कर दिया जाता है।
colourके बजायcolorलिखना — CSS American spelling इस्तेमाल करता है।- हर element को अलग से style करना, जबकि दोहराए जाने वाले styles के लिए class इस्तेमाल करनी चाहिए।
- पूरे पेज के layout के लिए style attribute इस्तेमाल करना — यह काम stylesheet का है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
</head>
<body>
<p style="color: red;">This text is red.</p>
<p style="background-color: yellow;">Yellow background.</p>
<p style="font-size: 24px;">Big text.</p>
<p style="text-align: center;">Centred text.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. style एट्रिब्यूट क्या है?
style एट्रिब्यूट से किसी एक एलिमेंट पर सीधे CSS लगाया जाता है। इसे इनलाइन स्टाइलिंग कहते हैं, और यह एक एलिमेंट का लुक बदलने का सबसे तेज़ तरीका है।
2. एक एलिमेंट पर कई स्टाइल कैसे लिखें?
हर स्टाइल को प्रॉपर्टी, कोलन, वैल्यू और सेमीकोलन के रूप में लिखें, और कई स्टाइलों को सेमीकोलन से अलग करें।
3. इनलाइन स्टाइल कब नहीं इस्तेमाल करनी चाहिए?
जब एक जैसा लुक कई एलिमेंट पर चाहिए। एक ही स्टाइल दस बार लिखना बेकार है; तब style ब्लॉक या CSS फ़ाइल बेहतर है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
