What is CSS? How and Why Use it?

चूंकि CSS का संबंध हमेंशा किसी Web Document की Styling से होता है, इसलिए बिना किसी Web Document को उपयोग में लिए हुए हम किसी भी CSS Rule को Apply होते हुए नहीं देख सकते। ये Web Document कोई HTML अथवा XML File हो सकता है, जिस पर हम विभिन्न प्रकार की Styles को Apply करके उस Document के Appearance को Control करते हैं।

चूंकि हम जानते हैं कि एक Web Document के Content को HTML के विभिन्न Elements का प्रयोग करके Structure किया जाता है और तय किया जाता है कि कौनसा Content क्या है। यानी कौनसा Content Heading बन रहा है और कौनसा Content Paragraph बन रहा है।

Web Document का Structure तय करने के बाद उस Web Document की Appearance तय करने के लिए यानी वह Web Document कैसा दिखाई देगा, इस बात को तय करने के लिए हम CSS को उपयोग में लेते हैं।

CSS हमें ऐसे Rules Specify करने की सुविधा देता है, जो ये तय करते हैं कि HTML Document के विभिन्न Contents यानी Headings, Paragraphs, Lists आदि Web Browser में Render होने के बाद कैसे दिखाई देंगे। एक CSS Rule के हमेंशा दो हिस्से होते हैं:

Selector

CSS Rule का ये हिस्सा उस HTML Element या Elements के Group को Represent करता है, जिन पर Declaration Part में Specify किए Rules Apply होंगे।

Declaration

CSS Rule का ये हिस्सा उन Styles को Specify करता है, जो Selector Part में Specify किए गए Element या Elements के Group पर Apply होंगे। Selector व Declaration को हम निम्न चित्रानुसार समझ सकते हैं :

जैसा कि आप इस चित्र में देख सकते हैं कि h1 एक Selector है जबकि Curly Braces के बीच लिखा गया Text एक Declaration है।

किसी भी CSS Rule के Declaration Part के भी दो हिस्से होते हैं: Property व Value

Property and Value

चूंकि विभिन्न Web Browsers को शुरू से ही Object Oriented Technology के आधार पर ही Develop किया गया था, जिसमें सभी Physical व Logical चीजों को एक Object के रूप में Represent किया जाता है। इसीलिए एक HTML Document व उसके विभिन्न Elements भी Web Browser के नजरिए से एक प्रकार का Object होते हैं।

Object Oriented Methodology में हर Object दो चीजों Properties व Behaviors से बना होता है क्योंकि हर Object की अपनी कुछ न कुछ Statics, Appearance व Position होती है तथा हर Object किसी ना किसी तरह की Action को Perform करता है।

चूंकि HTML DOM Tree में सभी HTML Elements एक Object की तरह व्यवहार करते हैं, इसलिए हर Element की कुछ न कुछ Statics, Appearance व Position होती है, जिससे हर Element HTML DOM Tree में Uniquely Identify होता है साथ ही हर Element किसी ना किसी तरह का Action Perform करके अपने Behavior को भी Represent करता है।

HTML DOM Tree के विभिन्न HTML Element Object के Behavior को JavaScript द्वारा Handle किया जाता है, जबकि विभिन्न HTML Element Object की Properties को HTML के Attributes व CSS की Properties द्वारा Handle किया जाता है।

जब हम CSS के नजरिए से किसी HTML Element को देखते हैं, तब DOM Tree में स्थित हर HTML Element Object की विभिन्न प्रकार की Stat, Appearance व Position से संबंधित Properties होती हैं, जिन्हें किसी ना किसी प्रकार के मान से Set किया जाता है।

Selected HTML Element की Property व उस Property में Set की जाने वाली Value को एक Color द्वारा Separate किया जाता है। हम एक ही Selected Element या Element के Group पर एक से ज्यादा Properties व Values को Set कर सकते हैं।

उदाहरण के लिए मानलो कि हम हमारे HTML Document के First Heading को बडा भी दिखाना चाहते हैं और Red Color में भी दिखाना चाहते हैं। इस स्थिति में हम निम्नानुसार h1 Heading को दो Properties में Values Set कर सकते हैं:

Heading1 Font Size = Large;
Heading1 Color = Red;

जब हम विभिन्न HTML Elements की CSS Properties को Set करना चाहते हैं, तब हमें हर Property व उसकी Value के बीच एक Color Use करना पडता है। साथ ही हर Declaration का अन्त एक Semicolon से करना होता है। यानी :

Heading1 Font Size : Large;
Heading1 Color : Red;

चूंकि ये दोनों Rules एक Heading1 Element पर Apply करने हैं, इसलिए हम इसे निम्नानुसार भी Specify कर सकते हैं:

h1 Font Size = Large;
h1 Color = Red;

चूंकि Heading1 दोनों ही Rules में Common है, इसलिए हम इसे एक बार लिख कर द्रोद्गा सभी Declarations को एक Curly Braces के बीच Specify कर सकते हैं, जैसा कि किसी भी Simple Mathematics में किया जाता है। यानी :

h1 {
 Font Size = Large;
 Color = Red;
}

चूंकि हालांकि CSS Case Sensitive नहीं है और हम CSS Rules लिखने के लिए Capital Lettes का भी प्रयोग बिना किसी परेशानी के कर सकते हैं, लेकिन CSS में Small Case Letters का प्रयोग किया जाना ठीक रहता है क्योंकि Small Case Letters पढने में आसान रहते हैं, इसलिए हम इस CSS Rule को निम्नानुसार भी लिख सकते हैं:

h1 {
 font-size = large;
 color = red;
}

और ये है हमारा एक Simple सा CSS Rule जो उस HTML Page के h1 Element पर Apply होगा, जिसके साथ हम Current CSS File को Link करेंगे।