HTML STYLES
HTML शैली (Style) क्या है?
Style Tag का means होता हैं बनावट यानी एक HTML Document को Style करना या डिज़ाइन (Design) करना।
HTML Style विशेषता का उपयोग Styles को किसी Element में Add के लिए किया जाता है, जैसे कि रंग, फ़ॉन्ट, आकार और आदि।
HTML Style Attribute (शैली विशेषता):
HTML Element की Style सेट करना, Style Attribute के साथ किया जा सकता है।
Syntax of HTML Style Attribute :
<tagname style="property: value;">
- tagname: यहाँ आप कोई भी Tag लिख सकते है। जिसके लिए आप Style Information लिखना चाहते है। लेकिन, वह Element Body Element के भीतर ही Define होना चाहिए।
- property: यह CSS Property होती है। मतलब, जो Style आप Element के लिए Use करना चाहते है। इसे आप “What” भी कह सकते है।
- value: यह CSS Value होती है। मतलब, आप Element के लिए कैसी Style लगाना चाहते है। इसे आप “How” भी कह सकते है।
आप इस Tutorial में बाद में CSS के बारे में अधिक जानेंगे।
पृष्ठभूमि (Background) रंग (Color) शैली (Style):
CSS background-color property, HTML Element के लिए Background Color को Define करता है।
For Example:
- Set the background color for a page to orange.
<!DOCTYPE html>
<html>
<body style="background-color: orange;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
This is a paragraph.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: powderblue;">This is a heading</h1>
<p style="background-color: blue;">This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
This is a paragraph.
फ़ॉन्ट्स शैली (Fonts Style):
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family: sans-serif;">This is a heading</h1>
<p style="font-family: courier;">This is a paragraph.</p>
</body>
</html>
OUTPUT:
This is a heading
This is a paragraph.
पाठ रंग शैली (Text Color Style):
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: darkgreen;">This is a heading</h1>
<p style="color: darksalmon;">This is a paragraph.</p>
</body>
</html>
OUTPUT:
This is a heading
This is a paragraph.
पाठ का आकार शैली (Text Size Style):
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size: 60px;">This is a heading</h1>
<p style="font-size: 30px;">This is a paragraph.</p>
</body>
</html>
OUTPUT:
This is a heading
This is a paragraph.
पाठ संरेखण शैली(Text Alignment Style):
Example:
<!DOCTYPE html>
<html>
<body>
<div style="text-align: center;">
<h1>Centered This is a heading</h1>
<p>Centered This is a paragraph.</p>
</div>
</body>
</html>
OUTPUT:
Centered This is a heading
Centered This is a paragraph.
0 Comments