HTML STYLES



HTML शैली (Style) क्या है?

Style Tag का means होता हैं बनावट यानी एक HTML Document को Style करना या डिज़ाइन (Design) करना।

HTML Style विशेषता का उपयोग Styles को किसी Element में Add के लिए किया जाता है, जैसे कि रंग, फ़ॉन्ट, आकार और आदि।

वैसे तो Style के लिए CSS का Use किया जाता है. लेकिन, आप सिर्फ HTML की Help से भी कुछ सीमा तक एक HTML Document को अपने हिसाब से Style कर सकते है।

HTML Document की Style में Font Change करना, Font Family Change करना, Background Change करना और Text Color Change करना आदि को शामिल किया जाता है।


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:

  1. 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.


      2. Set the background color for Two different Element :

<!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):

CSS font-family property HTML Element के लिए उपयोग किए जाने वाले फ़ॉन्ट (font) को Define करती है:

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):

CSS color property, HTML Element के लिए Text Color को परिभाषित करता है:

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):

CSS font-size property, HTML Element के लिए text size को परिभाषित करती है:

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):

CSS text-align property, HTML Element के लिए क्षैतिज (horizontal) text alignment को परिभाषित करता है:

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.