How to Link CSS File in HTML Webpage?

Link to CSS File in HTML: CSS File Create करने के लिए हमें केवल एक Text Editor की जरूरत होती है। Notepad++ एक अच्छा Text Editor है क्योंकि इसमें हम विभिन्न CSS Rules को अलग-अलग Color में देख सकते हैं, जिससे CSS Rules लिखना आसान हो जाता है। बस हमें File Save करते समय इतना ध्यान रखना होता है कि हम अपनी File को .css Extension के साथ Save करें।

हम विभिन्न प्रकार के GUI Editors जैसे कि Dreamweaver, Eclipse, Netbeans, MS Expression Web आदि भी उपयोग में ले सकते हैं, लेकिन जब CSS सीख रहे होते हैं, तब सबकुछ स्वयं लिखना ज्यादा सही रहता है। इससे Language को सीखना आसान हो जाता है।

Linking CSS File

CSS File Create कर लेने के बाद हमें उसे उस HTML Document से Link करना होता है, जिसे हम Style करना चाहते हैं। CSS File को HTML Document File से Link करने के लिए हमें HTML के <link> Element को उपयोग में लेना होता है।

<link> Element

ये Element किसी Style Sheet File को Current HTML Document से Link करने का काम करता है। ये Element में Attributes को Support करता है, जिनमें से तीन को जरूर Specify करना चाहिए।

rel Attribute

इस Attribute में हमें “stylesheet” लिखना होता है क्योंकि ये Attribute HTML Document से हमारी Stylesheet File के बीच के आपसी Relationship को Represent करता है और HTML Document की Rendering के समय Web Browser को बताता है कि Current HTML Document से Link होने वाला Resource एक Stylesheet File है।

type Attribute

इस Attribute में हमें Link होने वाले Resource के MIME Type को Specify करना होता है। चूंकि हम एक “Stylesheet” File को Current HTML Document से Link कर रहे हैं जो कि एक Text File होती है और उसमें CSS Rules लिखे होते हैं, इसलिए इस Attribute में हमें “text/css” मान Specify करना होता है, जो HTML Document की Rendering के समय Web Browser को बताता है कि Current HTML Document से Link होने वाला Resource एक Stylesheet File जिसे Plain Text के रूप में लिखा गया है।

href Attribute

इस Attribute में हमें Current HTML Document के साथ Link की जाने वाली CSS File के Absolute या Relative URL को Specify करके ये बताना होता है कि हमारी CSS File Current HTML Document के Relation में Web Server पर कहां स्थित है।

hreflang Attribute

इस Attribute में हमें Current HTML Document के साथ Link की जाने वाली CSS File के Encoding को Specify करके ये बताना होता है कि हमारी CSS File किस Language में लिखी गई है। सामान्यतया हमारी CSS File English में होती है, इसलिए यदि हम इसे Specify नहीं करते हैं, तो Web Browser हमारे HTML Document की Encoding के अनुसार इस CSS File की Language को उपयोग में ले लेता है जो कि सामान्यतया UTF-8 होता है।

media Attribute

इस Attribute में हमें ये बताना होता है कि Current HTML Document के साथ Link की जाने वाली CSS File के Rules किस Device पर सबसे ज्यादा उपयुक्त तरीके से Apply होंगे। उदाहरण के लिए यदि हम इस यहां पर कोई मान Specify न करें, तो हमारी CSS File सभी Devices जैसे कि Computer, Mobile, PDA आदि पर समान रूप से Apply होगी। सामान्यतया इस Attribute में हम निम्न में से कोई एक या Space Separated List के रूप में एक से ज्यादा मानों को Specify कर सकते हैं:

screen
यदि हमारी CSS File के Rules मूल रूप से Computer Screens के लिए Define किए गए हैं, तो हमें media Attribute में इस मान को Specify करना होता है।

tty
यदि हमारी CSS File के Rules मूल रूप से Teletypes, Terminals या Portable Devices के लिए Define किए गए हैं, तो हमें media Attribute में इस मान को Specify करना होता है।

tv
यदि हमारी CSS File के Rules मूल रूप से TV Devices के लिए Define किए गए हैं, जिनका Resolution कम होता है, Color Screen की Quality Computer Screen की तुलना में कम होती है और Scroll करने की क्षमता Limited होती है।

print
यदि हमारी CSS File के Rules मूल रूप से Printed Document के लिए Define किए गए हैं, जो कि Print Preview Mode में दिखाई देते हैं। सामान्यतया जब हम हमारी Web Site के Content को Printout के लिए उपलब्ध करवाना चाहते हैं, तब Print Out के लिए हमें एक अलग CSS File बनानी होती है और उस CSS File में हमें Document को Print किए जाने वाले Paper की Size को आधार मानते हुए CSS Rules Specify करने होते हैं।

projection
यदि हमारी CSS File के Rules मूल रूप से किसी Projectoer के लिए Define किए गए हैं, तो हमें इस Attribute में इस मान को Specify करना होता है।

handheld
यदि हमारी CSS File के Rules मूल रूप से किसी Hendhald Device जैसे कि Small Screens, Bitmapped Graphics आदि के लिए Define किए गए हैं, जिनकी Bandwidth Limited होती है, तो हमें इस Attribute में इस मान को Specify करना होता है।

braille
यदि हमारी CSS File के Rules मूल रूप से किसी Braille Tactile Feedback Device के लिए Define किए गए हैं, तो हमें इस Attribute में इस मान को Specify करना होता है।

aural
यदि हमारी CSS File के Rules मूल रूप से किसी Speech Synthesizer के लिए Define किए गए हैं, जो HTML Document के Contents को Read करके सुनाता है, तो हमें इस Attribute में इस मान को Specify करना होता है।

all
यदि हमारी CSS File के Rules मूल रूप से उपरोक्त सभी Devices के लिए समान रूप से Apply होते हों, तो हमें इस Attribute में इस मान को Specify करना होता है। यदि इस मान को Specify न भी किया जाए, तो भी Default रूप से इस Attribute में यही मान Set रहता है।

मानलो कि हमारी CSS File का नाम styles.css है और हम इस File को किसी HTML Document से Link करना चाहते हैं, तो हमें हमारे HTML Document के Head Section में इस Stylesheet को निम्न Statement द्वारा Link करना होगाः

<link type="text/css" rel="stylesheet" href="styles.css" media="all" hreflang="en-US" />

किसी CSS Rule को हम किसी HTML Document के अन्दर Inline CSS के रूप में किसी भी HTML Document के style Attribute का प्रयोग करके भी Specify कर सकते हैं और किसी HTML Document के Head Section में <style> Element का प्रयोग करके भी Internal CSS Specify कर सकते हैं।

लेकिन हमें ऐसा नहीं करना चाहिए। हमें हमेंच्चा CSS File यानी HTML Document के Presentation से संबंधित सभी Rules को एक अलग CSS File में ही Specify करना चाहिए, भले ही CSS File में केवल एक ही CSS Rule क्यों न हो। क्योंकि :

• एक External Stylesheet को हम एक से ज्यादा Web Sites में उपयोग में ले सकते हैं। जिससे एक ही प्रकार की Web Sites के लिए हमें बार-बार एक जैसे CSS Rules नहीं लिखने पडेंगे और हम ज्यादा तेजी से Web Site बना सकेंगे।
• हर Element या हर Web Page पर अलग से CSS Rules Apply न करने की वजह से हमारे Document की Size छोटी होगी, जिससे Network पर Use होने वाला Bandwidth कम Use होगा और हमारा Web Page छोटा होने की वजह से ज्यादा तेजी से Web Browser में load होगा।
• हम केवल एक ही File में Change करके पूरी Web Site के Look व Display को Change कर सकते हैं। यानी पूरी Web Site के Appearance का Control केवल एक ही File में होगा, जिससे Web Site की Style व Appearance को Control करना आसान रहेगा।
• हम एक ही HTML Document से अलग-अलग Stylesheets Link करके एक ही Web Site को अलग-अलग स्थितियों में, अलग-अलग Devices पर अलग-अलग तरीकों से Render कर सकते हैं।
• किसी Stylesheet को Remove कर देने की स्थिति में HTML Document के Content पर किसी तरह का कोई प्रभाव नहीं पडेगा।