HTML Style tag in Hindi – Free HTML Course

Posted on by

Free HTML Course Tutorial के HTML Style tag in Hindi topic में आप का स्वागत है |

Contents hide
1 HTML style tag kya hai ( HTML Style tag in Hindi )
2 HTML me css link kaise kare
3 HTML Style in Hindi Video
4 Inline css or Inline Styles in hindi
5 Internal Styles or Embedded Style Sheets in HTML
6 How to Linking External css Style Sheets in html
7 How to Import External Style Sheets in html

HTML style tag kya hai ( HTML Style tag in Hindi )

आइये हम यह समझ ने की कोशिश करते है की HTML Style tag kya hai क्या है और इसे HTML document में क्यों use किया जाता है |

जब Web Page के presentation की बात आती है तो HTML काफी limited होता है। यह मूल रूप से information को simple तरीके के way में present करने के लिए design किया गया था।

World Wide Web Consortium (W3C) के द्वारा 1996 में HTML Elements को style करने का एक better way provide करने के लिए CSS ( Cascading Style Sheets ) को introduced किया गया था।

CSS के साथ, font के लिए typeface और size, text और backgrounds के लिए colours, text और images का alignment, elements के बिच की जगह, elements के लिए border और outlines , इसके अलावा और भी अन्य styling properties को specify करना बहुत ही आसान हो गया है |

HTML me css link kaise kare

HTML में css link three types से link कर सकते है, means html में styles sheet को तीन तारीखे से use कर सकते है |

  • Inline styles – इसमें HTML start tag में style attribute का use किया जाता है |
  • Internal styles OR Embedded style – इसमें HTML document के head section में <style> element का use किया जाता है |
  • External style sheet – इसमें <link> element का use कर के external css file को point किया जाता है |

इस tutorial में हम इन सभी विभिन्न प्रकार की style sheet को एक-एक करके cover करेंगे।

Note : inline style sheet की priority highest होती है और external style sheet की priority lowest होती है | इसका मतलब यह है की यदि किसी paragraph के लिए या किसी अन्य elements के लिए inline styles और external style sheet use करोगे तो inline styles, external style sheet को overwrite करेगी |

HTML Style in Hindi Video

Inline css or Inline Styles in hindi

Inline styles का use HTML element के लिए unique style apply करने के लिए किया जाता है | इसमें css rules को directly HTML start tag में डाला जाता हैं |

Style attribute में css की property और value एक pair के साथ serises में शामिल होती है। प्रत्येक property : value की जोड़ी (pair) को अर्धविराम (;) द्वारा अलग की जाती है | जिस HTML element में inline style का use किया गया हो उस में style attribute की property और value के pairs एक ही line में लिखे जाते है, means semicolon के बाद कोई line break नहीं की जाती है |

निम्न example दर्शाता है कि text का color और font-size कैसे set किया जाए:

<h1 style="color:blue; font-size:50px;">This is example1</h1>
<p style="color:orange; font-size:22px;">This is example2</p>
<div style="color:red; font-size:19px;">This is example3</div>

Inline styles का use करना आमतौर पर एक bad practice माना जाता है। क्योंकि इसमें style rules सीधे html tag के अंदर embedded किए जाते हैं | जिसकी वजह से css rules और html document के content presentation के time mixed हो जाता है , जो किसी website को update या maintan करना बहुत dificult बना देता है।

Internal Styles or Embedded Style Sheets in HTML

Embedded या internal style sheets केवल उस document को ही affect करेगा जिसमें वे embedded किए गए हो।

Embedded style sheet को HTML document के <head> section में <style> tag का use करके define किया जाता है। आप <head> section में अपनी needs के according कितने भी style elements को define कर सकते है |

निम्नलिखित example दर्शाता है कि web page के अंदर style rules कैसे embedded किए जाते हैं।

<head>
    <style>
        body { background-color: redyellow; }
		h3 { color: blue; }
        p { color: orange; }
    </style>
</head>

How to Linking External css Style Sheets in html

<link> tag के जरिये HTML document में external style sheet को link किया जा सकता है |

<link> tag <head> section के अंदर लिखा जाता है, जैसा कि यहां दिखाया गया है:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

How to Import External Style Sheets in html

आप external style sheet को import करके भी load कर सकते है | @import rule के जरिये external style sheet को import करके load किया जाता है | @import statement web browser को external style sheet load करने और उसकी styles का use करने का निर्देश देता है।

@import rule को दो तरह से इस्तेमाल कर सकते हैं। <head> section में <style> element के साथ इसे इस्तेमाल करना सबसे आसान तरीका है | Note, अन्य CSS rules को अपने जरूरतों के मुताबिक <style> element में include किए जा सकते हैं।

Example :

<style>
    @import url("css/style.css");
    p {
        color: red;
        font-size: 18px;
    }
</style>

ऊपर दिया गया example में style.css name की external style sheet को @import rule के जरिये load किया है साथ ही paragraph element पर color और font-size का style भी apply किया है |

इसी तरह, आप किसी अन्य style sheet में दूसरी style sheet को @import rule के जरिये import कर सकते है |

Example :

@import url("css/responsive.css");
@import url("css/font.css");
body {
    color: red;
    font-size: 16px;
}

ऊपर दिए गए उदहारण में responsive.css और font.css name की two files को दूसरी style sheet में import किया है साथ ही body element पर color और fon-size की style भी अप्लाई की गयी है |

हम style sheet के अन्य rules को अधिक गहराइयों के साथ css in html के special topics में cover करेंगे |

Note : सभी @import rules style sheet की शुरुआत में होने चाहिए। style sheet में define कोई भी style rule import की गयी style sheet में परस्पर विरोधी rule को override करता है। @import rule performance issues का कारण बन सकता है, इसलिए आपको आमतौर पर style sheet import करने से बचना चाहिए।

यह भी पढ़े :-