HTML Styles

Style Attribute Syntax

किसी भी HTML element को style करने के लिए, आप उसके opening tag के अंदर style attribute जोड़ते हैं। यह attribute semicolons से अलग किए गए property-value pairs के रूप में लिखे गए standard CSS declarations स्वीकार करता है।

उदाहरण: The Style Attribute Syntax

<p style="color: blue; font-size: 18px;">Styled text</p>

Text और Foreground Color नियंत्रित करना

color property किसी element के अंदर text का रंग बदलती है। आप रंगों को standard English names, hexadecimal codes (जैसे #0000ff), या RGB values का उपयोग करके define कर सकते हैं।

Hex codes असल projects में सबसे आम choice हैं क्योंकि वे shade और tone पर precise control देते हैं।

उदाहरण: Controlling Text and Foreground Color

<p style="color: red;">Named color</p>
<p style="color: #0000ff;">Hex color</p>
<p style="color: rgb(0,128,0);">RGB color</p>

Background Colors और Container Fills

background-color property किसी element के container का fill color set करती है। इसका उपयोग आमतौर पर highlighted alert boxes, visual cards, या custom banners बनाने के लिए किया जाता है।

readability और accessibility के लिए text color के मुकाबले पर्याप्त contrast वाला background color चुनना ज़रूरी है।

उदाहरण: Background Colors and Container Fills

<div style="background-color: yellow; padding: 10px;">
  Highlighted alert box
</div>

Typography और Fonts एडजस्ट करना

आप font-family property का उपयोग करके एक typeface चुनकर, और font-size property से characters का physical size control करके अपने text का दिखना पूरी तरह बदल सकते हैं।

क्योंकि हर visitor के पास हर font install नहीं होता, इसलिए अपने पसंदीदा choice के बाद sans-serif जैसी एक fallback generic family list करना best practice है।

उदाहरण: Adjusting Typography and Fonts

<p style="font-family: Georgia, sans-serif; font-size: 18px;">
  Styled paragraph text
</p>

Text Alignment और Centering

By default, text अपने container के बाएं edge पर aligned होता है। text-align property आपको इस alignment को बदलने देती है, जिससे main titles को center करना या data numbers को right align करना आसान हो जाता है।

उदाहरण: Text Alignment and Centering

<h1 style="text-align: center;">Centered Title</h1>
<p style="text-align: right;">Right-aligned number</p>