जब एक browser किसी style sheet को reads करता है,तो यह पेज को style sheet के अनुसार format कर देता है ।
CSS को Insert करने के 3 तरीके है:
किसी style sheet को Insert करने के निम्न 3 तरीके है:- External style sheet
- Internal style sheet
- inline style
External Style Sheet
जब एक ही style कई पेजों पर लगानी हो तो external style sheet सबसे उपयुक्त विकल्प है। external style sheet के द्वारा, आप पूरी Web site का look सिर्फ़ एक file में बदलाव करके कर सकते हैं। बस हर पेज <link> tag द्वारा style sheet को प्रयोग करते हुए लिंक होना चाहिए। <link> tag को <head> section के अंदर डाला जाता है :|
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
एक external style sheet किसी भी text editor (जैसे- नोटपेड) में लिखी जा सकती है। फ़ाइल मे किसी html tag का प्रयोग नही होता है। आपकी style sheet हमेशा .css extension मे ही सेव होनी चाहिए। style sheet फ़ाइल का एक उदाहरण निम्न है:
|
hr {color:sienna;}
p {margin-left:20px;} body {background-image:url("images/back40.gif");} |
property value और unit के बीच रिक्त स्थान (space) ना रखें (जैसे कि- margin-left:20 px इसमें सही तरीका है- margin-left:20px)
Internal Style Sheet
internal style sheet का प्रयोग एक पूरे पेज में unique style देने के लिये किया जाता है। Internal styles को HTML page के <head> section में <style> tag का प्रयोग करकें लिखा जाता है, इस तरह:|
<head>
<style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> |
Inline Styles
inline style के द्वारा हम style sheets के कई फ़ायदें खो सकते है क्योकि यह का content को presentation के साथ मिक्स कर देती है ।inline styles को प्रयोग करने के लिये हमें style attribute को relevant tag के साथ प्रयोग करना होगा । style attribute को कोई भी CSS property दी जा सकती है।
जैसे किसी paragraph का left margin और text color कैसे बदला जाये :
|
<p
style="color:sienna;margin-left:20px">This is a
paragraph.</p>
|
Multiple Style Sheets
यदि कुछ properties एक ही selector के लिये अलग-अलग style sheets मे अलग-अलग सेट की जाती है, तो अधिक निर्दिष्ट style sheet से values प्राप्त की जाती है ।उदाहरण के लिए, external style sheet मे h3 selector के लिए यह properties है:
|
h3
{ color:red; text-align:left; font-size:8pt; } |
|
h3
{ text-align:right; font-size:20pt; } |
|
color:red;
text-align:right; font-size:20pt; |
हेडर अनुभाग में एक स्टाइल शीट की घोषणा
ReplyDeletehtml स्टाइल शीट कोड उदाहरण