CSS
CSS का पूरा नाम है (Cascading Style Sheets) यह एक style sheet language है जो वेब डिजाइनिंग में उपयोग की जाती है और ये Web designing का बहुत Important Part है क्योंकि इसके बिना Website फीकी फीकी लगती है जैसे बिना चासनी के गुलाब जामुन. तो CSS Web designing में Webpage की Styling के लिए उपयोग की जाती है. Styling मतलब Webpage के Look को Better और खुभसूरत दिखता है चलो में आपको Example की मदत से समझाता हु.
जैसे की आपने ऊपर Example में कुछ Images देखि होगी 1 Image में एक Indian Actress है बिना Makeup की और Makeup के बाद वो कैसी
दिखती
है.
तो आप CSS को ऐसे भी समझ सकते हो कस्स यहाँ Makeup की तरह काम करता है वो वेबपज की स्टाइलिंग क्र और खुभसूरत बना देता है
ताकि उसेर्स का Experience अच्छा रहे और ऊपर Example में एक और Image है जिसमे एक घर है जिसका Basic Structure तैयार हो
चूका है मतलब घर बन गया बस उसके Plaster और Paint बाकि है वैसे ही HTML के इस्तेमाल से webpage को एक आकार मिलता है और
CSS
के इस्तेमाल से webpage को एक नया और आकर्षक (Attractive) रूप मिलता है.
तो HTML भी इसके करता है वो Webpage का Basic ढांचा (Structure) बना तो देता है पर उसकी Styling नहीं करता तो यहाँ उस Webpage की
Styling के लिए CSS काम आती है
जैसे वेबपज का बैकग्राउंड कलर चेंज करना टेक्स्ट कलर और उसकी Font Change करना Shadow Effect देना Animation लगाना बहुत
से
ऐसे काम है जो आप सिर्फ CSS की मदत से ही कर सकते हो.
CSS को सीखने के पहले आपको HTML आना Important है क्योकि CSS HTML के सात उयपोग होती है
यदि हम HTML नहीं जानते तो हमारे लिये CSS को सीखना बहुत मुश्किल होगा. CSS को सीखकर भी हम इसका कोई प्रयोग नहीं कर सकते
क्यूँकि यह अकेली उपयोग नहीं होता है. क्यूँकि यह HTML Tag पर लिखा जाता है और यह HTML Tag पर ही कार्य करता है.
इसलिये
CSS को सीखने से पहले आपको HTML का सामान्य ज्ञान तो होना आवश्यक है.
HTML और CSS हमेसा साथ में ही इस्तेमाल किये जाते हैं. CSS के बिना हम html का इस्तेमाल कर सकते हैं मगर html के बिना
css
का इस्तेमाल नहीं किया जा सकता है.
History of CSS
CSS के द्वारा Hakon Wium Lie ने Develop की गयी थी है. इन्होने ही सबसे पहले 1994 में CSS Rules को create करा था.
और इसके बाद W3C – World Wide Web Consortium द्वारा CSS Level 1 को दिसबंर 1996 में Published किया गया. यह CSS का पहला
Version कहलाया.
अब तक CSS के तीन Versions को Published किया जा चुके हैं,जो की है.
CSS Version 1
CSS Level 2
CSS Level 2.1
CSS Level 3
CSS3 Latest Version हैं जो अभी उपयोग किया जाता है Persent Time में.
तो अब आपको Idea हो गया होगा की CSS क्या काम आती है और कैसे ये Develop हुई अब हम जानते है की एक Webpage में केसे
CSS Apply की जा सकती है
एक Webpage पर CSS Apply करने के 3 Methods होते है जैसे कि नीचे बताया गया है..
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
जब हम किसी HTML tag के अंदर ही CSS लिखते हैं तो उसे Inline CSS बोलते हैं। इस Method में CSS की Properties “style” attribute के अंदर लिखी जाती हैं जैसे की आप निचे Example में देख सकते हो Style Attribute की मदत से हमने Text का Color और Font Size Change कर दी. ।
For Example
Output:
Example Of Inline CSS Method
This is Normal text.
This is with CSS
This is normal Size Of paragraph
This is Custom Size Of paragraph with 20px Size
Internal CSS
HTML में CSS का विभिन्न तरीकों से उपयोग किया जा सकता है. उनमें से एक Internal CSS का उपयोग है अर्थात् <style> Tag का उपयोग <head> </head> Tag में किया जाता है. यह एक पृष्ठ के लिए सीएसएस Style को परिभाषित करता है. इस Method में CSS किसी Webpage Page के अंदर ही लिखी या Apply की जाती है <style> Tag की मदत से जिसका effect भी केवल उसी पेज पर पड़ता हैं। इस तरीके में CSS style tags के अंदर लिखते हैं तथा style tags head tags के अंदर रहता हैं।
For Example
Output:
h1 Heading With CSS Effect
Paregraph With CSS Effect
पर धयान रहे दोस्तों Internal CSS मे अगर आप Style Tag की मदत से जब HTML Tag पर Without Id और Class Selector के बिना CSS Apply करते हो तो वो HTML Webpage में जितने भी p Eliment Use हो रहे होंगे तो वो CSS उन सब पर भी Apply होगी जैसे की आप निचे Example में देख सकते हो HTMl p Tag पर CSS Apply थी पर वो Webpage में मौजूद हर p Tag पर Automatic Apply हो गयी तो इस Problem से बचने के लिए हम CSS Selector id और Class का उपयोग करते है जिसकी मदत से हम Particular Selected Eliment पर ही CSS Apply कर सकते है. इनके बारे में Next Post में Detail में जानेंगे.
External CSS
इस तरीके में हम एक अलग CSS file बनाते हैं। और उसे html file/Webpage में link करते हैं। उदाहरण के लिए अगर हमारे पास
helloworld.html नाम की HTML File हैं और उसकी CSS की एक अलग style.css नाम की File हैं।
हमने हमारी stylesheet को html Page में <link> tag के द्वारा include किया हैं।
Note :-
अगर आप inline css के अन्दर css की कोई property use कर लेते है | और वही property internal css या external css मे
use करते है, तो external css या internal css की property work नही करती है | क्योकि उस property को inline css मे use
कर
लिए है |
Example
HTML File
Externel CSS File style.css
Output
Simple h1 Heading WIthout CSS
h1 Heading With CSS Effect
Simple Text WIthout CSS
Text With CSS Effect
What Software We Need to Write CSS Code
CSS Code को लिखने के लिए आपको किसी Perticular Software की Requrment नहीं है CSS COde को आप HTML की तरह Simple Text Editor में लिख सकते हो.
पर धयान रहे अगर आप CSS File बना रहे है तो उस FIle का Extention .css होना चाइये for Example mycssfile.css तभी उसका Code Run करेगा.
अगर आप कोई Software USe करना चाहते है तो में आपको कुछ Software Recommended कर सकता हु जो की इस प्रकार है.
- Visual Studio Code
- Sublime Text
- Atom
और भी बहुत है पर ये वो सॉफ्टवेयर है जिनसे ज्यादा तर वेबडेवेलोपेर यूज़ करे है वेबसाइट डिजाइनिंग में.
Advantages
CSS इस्तेमाल करने का सबसे बडा फायदा तो हैं आजादी – Freedom. आपको एक काम को बार-बार करने से छुटकारा मिल जाता हैं. इसके अलावा भी CSS इस्तेमाल करने के अनेक फायदे हैं, जिनके बारे में नीचे बताया जा रहा हैं.
Save Time
आप एक बार CSS Rules को लिखते हैं, और उन्हे कई बार Apply कर सकते हैं. आप एक Stylesheet को Multiple Webpages पर Apply
कर
सकते हैं. आपको प्रत्येक नय HTML Document के लिए CSS Rule लिखने की जरूरत नहीं हैं. इसलिए CSS Web Masters का कीमती समय
बचाती हैं.
समय की बचत इसका सबसे बड़ा फायदा दिखाई पड़ता है. क्योंकि, आपका Repitation में समय व्यर्थ नहीं हो रहा है. आप हर बार नए
के
लिए काम कर सकते है.
Increase Page Speed
एक HTML Document में दर्जनों Elements होते हैं. जिनके लिए हमें अलग-अलग Style Rules Set करने पडते हैं. और किसी-किसी
में
तो इनकी संख्या सैंकडो या हजारों में भी पहुँच जाती हैं.
इसलिए वेबपेज का साइज बढ जाता हैं. लेकिन, CSS की मदद से केवल एक स्टाइलशीट में ही सभी एलिमेंट्स के लिए Style Rules Set
कर
दिए जाते हैं. जिससे Extra HTML हट जाती हैं. और पेज का साइज कम हो जाता हैं. और इस कारण Page Fast Load होता हैं.
Google Fast Load होने वाली Websites को पसंद करता है. इसलिए Web Master के लिए CSS किसी वरदान से कम नहीं है.
Easy to Maintenance
आप पूरी वेबसाइट के लिए सिर्फ एक Stylesheet में CSS Rules Set कर सकते हैं. इसलिए हमे एक File को Manage करने में कोई
परेशानी नही आती हैं.
जी हाँ! आप पूरी website के लिए सिर्फ एक ही CSS File में पूरी Style लिख सकते है. ऐसा करने पर सभी Code एक जगह पर मौजूद
होते है. प्रत्येक Eliment के लिए अलग-अलग Style Rule लिखने की परेशानी से छुटकारा मिल जाता है.
यदि किसी Eliment में कुछ बदलाव करना होता है तो उसे ढूँढ़ने के बजाए. Stylesheet से उसे Update करना आसान होता है. इसलिए
CSS की Maintenance आसान और सुविधाजनक(Easy) है.
Provide Responsive Design
आप HTML से Webpage को प्रत्येक Device के लिए Optimize नहीं कर सकते हैं. लेकिन, CSS की Media Queries Rules से आप
Webpage
को हर Device और Screen Size के हिसाब से Responsive बना सकते हैं.
CSS की Media Queries Rules की मदत से हम एक वेबसाइट (Website) को मोबाइल(Mobile) और डेस्कटॉप(Desktop) दोनों पर अलग अलग Show करा सकते है ये सब CSS की वजह से मुमकिन हुआ CSS के पहले ये Possible नहीं था