Style attribute HTML में एक attribute है, जिसका उपयोग किसी specific element पर CSS (Cascading Style Sheets) को directly लागू करने के लिए किया जाता है। यह attribute inline CSS को define करता है और HTML element के साथ-साथ उसकी styling को एक ही जगह पर specify करता है।
HTML में किसी element की style सेट करने के लिए style attribute का उपयोग किया जाता है। यह attribute CSS properties को inline तरीके से HTML element पर लागू करता है।
Syntax:
<tagname style="property:value;">Content
</tagname>
<tagname>: HTML element का नाम (जैसे <p>, <h1>, <div>)।
style: यह attribute है, जिसका उपयोग CSS properties को define करने के लिए होता है।
property:value;: CSS की property और उसका मान, जिसे आप लागू करना चाहते हैं।
Note: CSS properties और values को semicolon (;) से अलग किया जाता है।
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a blue heading</h1>
<h2 style="color:green;">This is a green heading.</h2>
<P style="background-color: yellow;">This is a yellow background.</p>
</body>
</html>
इस कोड का output इस प्रकार होगा।
Style Attribute Example
This is a blue heading
This is a green paragraph with larger text.
This is a div with yellow background.
दो अलग अलग elements के लिए background colour
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: green;">This is a heading</h1>
<p style="background-color:pink;">This is a paragraph.</p>
</body>
</html>
ऊपर वाले कोड के लिये आउटपुट
This is a heading
This is a paragraph.
पेज के लिए background colour
<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML element के text के लिए font
font-family प्रॉपर्टी का उपयोग किसी HTML element के text के लिए font सेट करने के लिए किया जाता है।
यह प्रॉपर्टी बताती है कि टेक्स्ट को किस font style में दिखाना है। यदि पहला font उपलब्ध न हो, तो browser दूसरा font उपयोग करता है।
Syntax:
font-family: "font1", "font2", generic-family;
font1: प्राथमिक (primary) font।
font2: वैकल्पिक (fallback) font।
generic-family: एक सामान्य श्रेणी का font (जैसे, serif, sans-serif, monospace)।
नोट: ब्राउज़र fallback font तभी उपयोग करता है, जब प्राथमिक font उपलब्ध न हो।
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:times new roman;">This is a heading</h1>
<p style="font-family:verdana;">This is a paragraph.</p>
</body>
</html>
ऊपर वाले code का output
This is a heading
This is a paragraph.
Text-Size
font-size प्रॉपर्टी का उपयोग HTML element के text की size (आकार) सेट करने के लिए किया जाता है।
यह प्रॉपर्टी बताती है कि text छोटा, बड़ा या medium आकार का दिखना चाहिए। इसे अलग-अलग units (जैसे pixels, em, rem, percentages) में specify किया जा सकता है।
Syntax:
font-size: value;
Absolute Sizes:
xx-small, x-small, small, medium, large, x-large, xx-large- ये fixed sizes होती हैं।
Relative Sizes:
smaller, larger (parent element के relative)।
Length Units:
px (pixels), em, rem, %, vw, vh- ये responsive और flexible sizes के लिए उपयोग होती हैं।
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
ऊपर वाले code का output
This is a heading
This is a paragraph.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:1000%;">XXX</h1>
</body>
</html>
ऊपर वाले code का output
XXX
text-align
text-align प्रॉपर्टी का उपयोग किसी HTML element के text को horizontally (क्षैतिज रूप से) align करने के लिए किया जाता है।
यह प्रॉपर्टी यह निर्धारित करती है कि text left, right, center, या justify alignment में दिखेगा।
Syntax:
text-align: value;
Values:
- left: Text को बाईं तरफ align करता है।
- right: Text को दाईं तरफ align करता है।
- center: Text को center में align करता है।
- justify: Text को दोनों किनारों पर align करता है, जिससे text एक column जैसा दिखता है।
- start: Text को document के default प्रारंभिक दिशा में align करता है (LTR या RTL पर निर्भर)।
- end: Text को document की default अंतिम दिशा में align करता है।
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<h2 style="text-align:left;">left Heading</h2>
<p style="text-align:right;">right paragraph.</p>
</body>
</html>
इस code का output
Centered Heading
left Heading
right paragraph.
size and colour
Size and colour का use साथ साथ कैसे होता है देखिए।
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;font-size:900%;">XXXXX</h1>
</body>
</html>
इस code का output
XXXX
Different Colour
<!DOCTYPE html>
<html>
<body>
<h1>
<span style="color:red; font-size:900%;">X</span>
<span style="color:blue; font-size:900%;">X</span>
<span style="color:green; font-size:900%;">X</span>
<span style="color:orange; font-size:900%;">X</span>
</h1>
</body>
</html>
इस code का output
X
X
X
X
Colour Animation:
<!DOCTYPE html>
<html>
<head>
<style>
/* Animation for changing colors */
@keyframes colorChange {
0% { color: red; }
25% { color: blue; }
50% { color: green; }
75% { color: orange; }
100% { color: red; }
}
/* Common style for each X */
.animated {
font-size: 900%; /* Font size set to 900% */
animation: colorChange 4s infinite; /* Animation duration is 4 seconds */
}
/* Adding delay for individual spans */
.x1 { animation-delay: 0s; }
.x2 { animation-delay: 1s; }
.x3 { animation-delay: 2s; }
.x4 { animation-delay: 3s; }
</style>
</head>
<body>
<h1>
<span class="animated x1">X</span>
<span class="animated x2">X</span>
<span class="animated x3">X</span>
<span class="animated x4">X</span>
</h1>
</body>
</html>
इस code का आउटपुट:
X
X
X
X
HTML में Style Attribute का उपयोग कैसे करें
HTML में Style Attribute का उपयोग किसी भी element की styling को control करने के लिए एक आसान और प्रभावी तरीका है। यह attribute inline styling के लिए उपयोग होता है, जो specific element की appearance को तुरंत बदलने में मदद करता है।
चाहे text का color बदलना हो, font size सेट करना हो, या background color जोड़ना हो, Style Attribute HTML को अधिक आकर्षक और user-friendly बनाने में सहायक है। हालांकि, बड़े प्रोजेक्ट्स में maintainability के लिए CSS files का उपयोग बेहतर होता है।
Read Also
.webp)
No comments:
Post a Comment
Please अपने नाम से ही comment करें browser में अपनी ID से sign in करें इसके बाद comment करें ।