Inserting Css In an Html Document
How To use css style sheet with Html Document
एक css style sheet को Html document से Link करने के विभिन्न तरीके है
हम तीन प्रकार से अपने Html Document मे css style को apply कर सकते है
* The Internal style sheet
* The External Style sheet
* The Inline Style sheet
The Internal style sheet
Inernal Syle sheet को Html Document के Head section मे लिखा जाता है इस style sheet को केवल उसी Html document मे use किया जा सकता है जिसमे से Define किया जाता है और किसी अन्य web document के लिए से use नही किया जा सकता है।
इसका syntax निम्न है
<style Type=" Text/css">
Selector
{
Property1:value;
Property2:value;
.
.
.
.
PropertyN:value;
}
</style>
Internal css style sheet को Html Document मे add करने के लिए <style> tag का use किया जाता है <style> tag मे type attribute का use किया जाता है इसे द्वारा <style> tag मे media type को define किया जाता है इसकी value के रूप मे text/css media type देते है इसे बाद हम element selector (For ex- p, h1, div, id name-#mypage, class-.myclass etc) देते है और curly Braces ({}) के अंदर declaration या css rules list जो की property:value (for ex- Color:red;) के Formate मे लिखा जाता है लिखते है और इस statement की ending को semicolon(;) से show करते है इस प्रकार हम declaration section मे कितने भी statement या css rules दे सकते है जिसके अनुसार हमारे Html element की formatting या appearance set कर दी जाती है
Ex
style Type=" Text/css">
P
{
Color:red;
Font-Family:Monotypecorsiva
}
</style>
The External Style sheet
External style sheet ऐसी style sheet होती है जो Html Document के साथ न लिखकर अलग से किसी text एडिटर या Html editor जैसे Notepad का use कर लिखी जाती है और इसे .css extension के साथ save किया जाता है
इसका syntax निम्न है
Selector1 {
declaration
}
Selector2 {
declaration
}
.
.
.
.
SelectorN {declaration}
For ex- "mystyle.css" file looks like
Body {
Background-color:pink;
Margin:100px
Padding:20px
}
H1{
Font-family:Camberia;
Color:red;
Font-size:50px
}
P {
Font-family:monotype corsiva;
Color:white;
Font-size:35px;
}
external style sheet मे किसी भी प्रकार का html Tag शामिल नही होता है। यदि हम External style sheet का use कर रहे है तो हम एक file मे changes कर के entire web site का look change कर सकते है
यदि हमारे पास external style sheet है तो हम इसे अपने web पे के साथ निम्न प्रकार से link कर सकते है
Link Tag -
हम Link html element(tag) का use करके किसी भी extenal Style sheet को किसी भी html document के साथ link कर सकते है और उस web page का look link की गई external style sheet के अनुसार change कर सकते है इस link tag के तीन attribute होते है
Rel - यह atribute यह specify करता है की हम क्या link कर रहे है जैसे style sheet
Type - इसका use कर browser का MIME type specify करते है
Href - इसका use कर हम css file का path देते है।
Ex -<Link rel="style sheet" Type="text/css" Href="test.css">
Inline style sheet को body tag के अंदर use किये जा रहे tag मे ही use करते है
इसका syntax निम्न है
The inLine style
Inline style को हम html Document के अंदर ही उस html element के साथ use करते है जिसे हमें style करना है इसके लिए हमे उस html tag या element के अंदर style attribute का use करना होता है और इस attribute की value के रूप मे हम ("") मे आवश्यक properties और उसकी value भी define करते है हम आवश्यकतानुसर कितनी भी properties और उनकी value को (;) से seprate करते हुए use कर सकते है।Inline style sheet को body tag के अंदर use किये जा रहे tag मे ही use करते है
इसका syntax निम्न है
<tagname style ="pro1=val; pro2=val;........ proN=val; ">text</tagname>
Pro= property val= value
Ex-<p style ="color=white; font-family=monotype corsiva; font-size=20px;">css Style sheet</p>
Pro= property val= value
Ex-<p style ="color=white; font-family=monotype corsiva; font-size=20px;">css Style sheet</p>
Comments
Post a Comment