Internal Style Sheet in HTML Example: जब W3C (World Wide Web Consortium) जो कि विभिन्न Web Standard तय करने का काम करता है, ने जब HTML का तीसरा Version Release किया था, तब उन्होंने किसी Web Document को Stylish बनाने से सम्बंधित सभी Markups को इसमें Include किया था, ताकि एक Web Page को अच्छा दिखाया जा सके।
पिछले उदाहराण में हमने देखा कि हम Contents को अच्छे तरीके से Render करने के लिए विभिन्न Elements के साथ विभिन्न प्रकार के Attributes का भी प्रयोग कर सकते हैं और इस उदाहरण द्वारा हम समझ सकते हैं कि कुछ Markup किसी Web Page को Structure करने से सम्बंधित होते हैं, जबकि कुछ Markup केवल ये तय करने का काम करते हैं, कि Contents Web Browser में किस तरह से Display होंगे।
इस प्रकार के Markups, जो कि Web Page को Structure करने से सम्बंधित नहीं होते, बल्कि Web Page को सुन्दर तरीके से Display करने से सम्बंधित होते हैं, तो इस प्रकरा के Elements व Attributes को Stylistic Markup कहा जाता है।
<font>, <strong>, <me> आदि Elements तथा color व bgcolor आदि Attributes Web Page के Structure से सम्बंधित नहीं हैं, बल्कि Web Page को सुन्दर तरह से Display करने से सम्बंधित हैं। कहने का सारांश ये है कि एक Web Page में Structural Markup व Stylistic Markup प्रकार के दो तरह के Markup हो सकते हैं।
हमने जो पहला उदाहरण देखा था, वह पूरी तरह से Structural Markup पर आधारित था, जबकि हमने जो दूसरा उदाहरण देखा है, उसमें दोनों तरह के Markups का प्रयोग किया गया है। हम समझ सकते हैं कि Stylistic Markup का प्रयोग करने से Web Page ज्यादा Effective व Attractive बनता है, लेकिन इन Markups का प्रयोग करने से Page की Coding बढ भी जाती है, जिससे Page ज्यादा जटिल लगने लगता है।
जब W3C ने HTML का चौथा Version Release किया था, तब उन्होंने तय किया था कि एक Web Page में जितने भी Stylistic Markup होते हैं, उन्हें उस Web Page से अलग करके एक अलग File में Hold किया जाए और उन्हें Web Pages पर Apply कर दिया जाए, ताकि Web Document का Structure ज्यादा जटिल ना होने पाए। इस काम के लिए उन्होंने एक नई Language बनाई और उस Language का नाम Cascading Style Sheet या CSS रखा।
CSS File में उन नियमों को लिखा जाता है, जो एक Web Server को बताते हैं कि किसी Web Page को किस तरह से Format करना है, विभिन्न Headings को किस तरह से व किस Color में दिखाना है, विभिन्न Paragraphs को किस तरह से Render करना है, आदि आदि। ये सभी नियम या Rules एक Separate File में लिखे जाते हैं, ना कि उसी Web Page में, जिसमें Web Page के Structure को तय किया जाता है। इस तरह से एक Web Page के Structure व उसके Appearance को एक दूसरे से अलग रखा जाता है। हर CSS Rule के दो हिस्से होते हैं:
- एक Selector, जो कि ये तय करता है कि किस Element पर CSS Rule को Apply किया जाना है। और
- एक Declaration, जो कि ये तय करता है कि हम उस Element की किन Properties (Font के Face, Color आदि ) को Change करना चाहते हैं और उनमें क्या मान (Arial, Red आदि) Set करना चाहते हैं।
इस प्रक्रिया को हम निम्न चित्र द्वारा समझ सकते हैं। इस चित्र में हम Document के <body> Element के लिए CSS Rule Set कर रहे हैं, जो उस Web Page के <body> Element तब Apply होगा, जब हम इस CSS File को किसी Web Page से Link करेंगे।
चूंकि हम इस चित्र में जिस CSS Rule को Web Page पर Apply कर रहे हैं, उस Web Page के Body Element पर ये Rule Apply होगा, इसलिए <body></body> Tag Pair Element के बीच लिखे गए हर Child Element पर ये Rule Apply होगा।
चलिए, हम समझने की कोशिश करते हैं कि हम किस तरह से किसी Web Page के Structural Markups व Stylistic Markup दोनों को अलग-अलग रखते हुए, उन्हें उपयोग में ले सकते हैं और वही Output प्राप्त कर सकते हैं, जिसे दोनों को आपस में Mix-Up करके प्राप्त करते हैं। इस प्रक्रिया को हम हमारे दूसरे उदाहरण पर ही Apply कर रहे हैं। हमारी CSS File निम्नानुसार है:
<-- CSS File -->
body
{
font-family:arial;
color:#000000;
background-color:#EFEFEF;
}
P
{
Color:#CC0000;
}
दूसरा CSS Rule Paragraph Tag को Select करता है और Web Browser को इस बात की Instruction देता है कि Paragraph के बीच जो भी Text लिखा जाएगा, उसका Color Red होना चाहिए।इस Style Sheet File में लिखा गया पहला CSS Rule Body Element के बीच के सभी Markup को Select करता है और Web Browser को बताता है कि <body> के अन्दर लिखे जाने वाले सभी Markup का Type-Face यानी Font-Family “Arial” होनी चाहिए और Color Black होना चाहिए साथ ही Background Color Light Gray होना चाहिए।
जैसा कि हम देख सकते हैं कि जब हम केवल Body Element के लिए किसी CSS Rule को Set करते हैं, तो वह CSS Rule Body Element के अन्दर लिखे जाने वाले सभी अन्य Markups पर भी समान रूप से Apply या Cascade हो जाता है, इसीलिए इस Style Sheet को Cascading Style Sheet कहा जाता है।
चलिए, अब CSS File के महत्व की बात करते हैं। मानलो कि हमारी Web Site में 200 Web Pages हैं और हमने हमारे हर Page में इस Rule को तय किया है, कि हर Web Page के Paragraph का Color Dark Blue रहेगा। लेकिन जब Web Site परी तरह से तैयार हो जाती है, तब किसी कारणवश हमें अपनी Web Site के हर Web Page के हर Paragraph का Color Dark Blue से Change करके Navy Blue करना है। अब सोंचिए कि 200 Web Pages के हर Paragraph का Color Change करने में कितना समय लगेगा।
लेकिन इसी जगह पर यदि हमने अपने हर Web Page से एक Style Sheet File को Attach किया हुआ हो, तो हमें केवल अपनी Style Sheet के अन्दर ही Paragraph के Color को Change करना होगा और जितने भी Web Pages से हमने उस Style Sheet को Attach किया होगा, उन सभी Web Pages के Paragraph का Color Automatically Change हो जाएगा। बस यही सबसे बडा फायदा है, Style Sheets को Use करने का, क्योंकि इसका प्रयोग करके हम हमारी Web Site को ज्यादा बेहतर तरीके से Manage कर सकते हैं।
<-- HTML File --> <html> <head> <title>HTML – Fast Track Course </title> <link rel=”stylsheet” type=”text/css” href=”style_01.css” /> </head> <body> <h1>HTML – Introduction </h1> <p> Style Sheet को हम आगे के अध्याय में विस्तार से समझेंगे, लेकिन यहां पर हमने एक Style Sheet File Create की है और उसे एक Structure File से Link किया है, ताकि इस Style Sheet के Rules हमारी Example वाली HTML File के Elements पर Apply हो जाए। CSS File को HTML File से Link करने के लिए हमने <link> Element का प्रयोग किया है। यदि हम चाहें, तो विभिन्न CSS Rules को HTML Page के <head> Element में भी लिख सकते हैं, लेकिन इस तरीके की तुलना में एक अलग CSS File Create कर लेना ज्यादा सुविधाजनक होता है, क्योंकि इस एक ही CSS File को हम एक से ज्यादा Pages में उपयोग में ले सकते हैं, जबकि यदि हम CSS Rules को <head> Element के बीच लिखेंगे, तो हर Web Page के लिए हमें बार-बार समान CSS Rules को लिखना पडेगा। </p> </body> </html>
यदि हम चाहें, तो विभिन्न CSS Rules को HTML Page के <head> Element में भी लिख सकते हैं, लेकिन इस तरीके की तुलना में एक अलग CSS File Create कर लेना ज्यादा सुविधाजनक होता है, क्योंकि इस एक ही CSS File को हम एक से ज्यादा Pages में उपयोग में ले सकते हैं, जबकि यदि हम CSS Rules को <head> Element के बीच लिखेंगे, तो हर Web Page के लिए हमें बार-बार समान CSS Rules को लिखना पडेगा।
Style Sheet को हम आगे के अध्याय में विस्तार से समझेंगे, लेकिन यहां पर हमने एक Style Sheet File Create की है और उसे एक Structure File से Link किया है, ताकि इस Style Sheet के Rules हमारी Example वाली HTML File के Elements पर Apply हो जाए। CSS File को HTML File से Link करने के लिए हमने <link> Element का प्रयोग किया है।
इस उदाहरण की HTML File में हमने <link> Element का प्रयोग किया है। इस Element को हमें हमेंशा <head> Element के अन्दर ही लिखना होता है। इस Element के अन्दर हमने तीन Attributes को Set किया है, जहां तीसरा Attribute उस File के नाम को Specify करता है, जिसमें हमने हमारे Page से सम्बंधित विभिन्न Stylistic Markups को लिखा है। CSS File Text File होती है, जिसका Extension .css रखा जाता है। (Internal Style Sheet in HTML Example)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
