Introduction to CSS selectors । Types of Selectors in Hindi । CSS full Tutorial

Introduction to CSS selectors

CSS 

CSS के syntax में selectors का important role होता है। आप किस element के ऊपर कौनसी style apply करना चाहते है ये आप selectors के द्वारा ही define करते है। ये CSS के selectors ही है जो इसे इतनी powerful और efficient language बनाते है। Selectors आपको HTML के किसी भी element को select करके उसकी presentation को change करने की ability provide करते है। इससे पहले की में आपको selectors के बारे में और बताऊँ आइये पहले CSS के syntax को समझ लेते है।

ऊपर दिए गए उदाहरण में h1 एक selector है। ये selector HTML के h1 tag पर apply हो रहा है इस तरह के selectors को element type selectors कहा जाता है। यँहा पर HTML tag को ही selector की तरह यूज़ किया गया है। Selector के बाद curly brackets में color property और उसकी value को define किया गया है। ये property heading के text को red में change कर देती है।

1. Types of selectors :-

                                       CSS के द्वारा कई तरह के selectors provide किये गए है जिन्हें यूज़ करके आप और भी accurately काम कर सकते है। इन selectors के बारे में detail से निचे दिया जा रहा है।

2. Element type selectors :-

                                               इस तरह के selectors किसी एक HTML tag पर apply होते है। इन selectors का नाम उसी HTML tag का नाम होता है। जब आपको किसी एक particular HTML tag पर कोई style apply करने की आवश्यकता हो तो आप इस तरह के selectors को यूज़ कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

3. Universal selector :-

                                       Universal selector को * से represent किया जाता है। इस selector में define की गई styles सभी HTML elements पर apply हो जाती है। लेकिन याद रहे ये तभी काम करता है जब उस element के लिए style अलग से define न की गई हो। यदि उस element के लिए अलग से style define की गई है या फिर वह element inline style sheet यूज़ करता है तो इस selector का कोई effect उस element पर नहीं होगा। इसका उदाहरण निचे दिया गया है।

यँहा पर universal selector h1 और p दोनों ही tags पर apply होगा और इनका color blue होगा।

4. Sub-element selector :-

                                           यदि आप किसी element पर तब CSS apply करना चाहते है जब वह किसी दूसरे element के अंदर आये तो इसके लिए आप sub-element selector यूज़ कर सकते है। सबसे पहले आप element का नाम देते है इसके बाद space देकर उस element का नाम लिखते है जिस पर आप styles apply करना चाहते है। इसका उदाहरण निचे दिया जा रहा हैं।

इस उदाहरण में <p> के sub-element <span> tag पर style apply हो रही है और उसका color orange हो रहा है।

5. Class selectors :-

                              हर HTML element एक class attribute define कर है। इसमें में class का नाम दिया जाता है। आप चाहे तो styles class attribute के base पर भी apply की जा सकती है। इसके लिए आप (.) operator लगाकर class का नाम selector की तरह लिखते है। जो जो elements उस class से belong करते है उन सभी पर define की गई styles apply हो जाती है। आइये इसे एक उदाहरण से समझते है।

6. ID selectors :-

                        Class attribute की तरह ही आप styles को किसी particular ID के लिए भी define कर सकते है। जिन HTML elements की ID इस ID से match करती है दी गई styles उन्हीं पर apply हो जाती है। किसी भी id पर styles apply करने के लिए आप # का उपयोग करते है। इसका उदाहरण निचे दिया जा रहा है।

7. Attribute selectors :-

                                       HTML tags के जैसे ही आप चाहे तो किसी HTML tag के attribute पर भी styles apply कर सकते है। इन selectors का उपयोग form tag के sub-elements के लिए किया जाता है। आप input type के according दूसरे attributes को छोड़ते हुए किसी एक attribute को target कर सकते है। इसका उदाहरण निचे दिया गया है।

ऊपर दी गई CSS style सिर्फ उसी image tag पर apply होगी जिसमे alt attribute की value myPic है।

8. Group Selectors :- 

                                   आप चाहे तो एक साथ एक से ज्यादा selectors भी use कर सकते है। इसके लिए आप सभी selectors को comma से separate करते है। Curly brackets में define की गयी styles सभी selectors पर apply होती है। आइये इसे एक उदाहरण से समझते है।

Advantages of CSS (Cascading Style Sheet) in Hindi । CSS Full Tutorial

Advantages of CSS (Cascading Style Sheet)

CSS 

* CSS को यूज़ करने से आपका time बचता है। आप एक CSS file बना कर उसे कई HTML documents पर apply कर सकते है। आप हर HTML tag के लिए एक style fix कर सकते है और इसे जितने चाहे उतने webpages पर apply कर सकते है।

* जब आप HTML attributes के द्वारा webpage को decorate करते है तो हर element के लिए अलग से attribute और value define करनी पड़ती है। ऐसा करने से code बहुत अधिक हो जाता है और pages धीरे load होते है। लेकिन जब आप CSS यूज़ करते है तो उस webpage में यूज़ होने वाले सभी tags के लिए आप एक बार ही styles define करते है। ऐसा करने से code कम रहता है और आपके pages fast load होते है।

* CSS के द्वारा webpage को maintain करना बहुत ही आसान होता है। उदहारण के लिए आप सभी headings का यदि color change करना चाहते है तो सिर्फ CSS में change कीजिये और ये सभी headings पर apply हो जायेगा।

* CSS आपको HTML से अधिक style options provide करती है। HTML के comparison में आप CSS से अधिक attractive webpages design कर सकते है।

* CSS के द्वारा आप एक ही webpage को multiple devices के लिए configure कर सकते है। जैसे की mobile phones के लिए अलग styles यूज़ की जा सकती है।

* अब HTML attributes का उपयोग बहुत कम हो चूका है। CSS को यूज़ करना अब एक global standard बन चूका है।

Applying CSS (Cascading style sheet)

1. Inline style sheet :-

     
                                 निचे दिए गए उदाहरण को देखिये इसमें body tag के अंदर style attribute define किया गया है। इसके बाद style attribute में property और value define की गई है। इसे inline style sheet कहते है।

2. Internal style sheet :-

 
                                         Internal style sheet में आप styles को HTML के अंदर define नहीं करते है। Head section में <script> tag define किया जाता है। इसके बाद selectors को यूज़ करते हुए आप styles को define करते है। इसमें HTML code और CSS code को एक ही document में define किया जाता है।

3. External style sheet :-

                                        External style sheet के concept में CSS किसी दूसरी file में होती है। उस file को <link> tag द्वारा HTML file पर apply किया जाता है। External style sheet से आपको बार बार CSS लिखने की जरुरत नहीं होती है। आप एक ही CSS file को कई HTML files पर apply कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

Introduction to CSS in Hindi । CSS Full Tutorial

Introduction to CSS in Hindi

CSS 

CSS एक designing language है। इसका इस्तेमाल webpages को और भी beautiful बनाने के लिए किया जाता है। CSS के द्वारा आप HTML tags पर designing apply कर सकते है। CSS आप 3 तरह से apply कर सकते है।

* Inline - इस method में आप CSS को HTML tag में ही define कर देते है। ऐसा आप style attribute के द्वारा करते है।

* Internal - इस method में आप CSS को HTML tag में define करने की बजाए HTML file के <head> tag में script tag की मदद से define करते है।

* External - इस method में आपकी CSS file और HTML file अलग अलग होती है। HTML file में आप CSS file को <link> attribute के द्वारा add करवाते है।

CSS से आप webpages के presentation को control कर सकते है। CSS आपको webpage की design पर पूरा control देती है। CSS से आप webpage का text color, font family, background, margin, padding और position आदि set कर सकते है।

CSS बहुत ही powerful technology है। इसकी मदद से आप complete HTML page की presentation control कर सकते है। CSS property और value के context में काम करती है। जैसे की यदि आप web page का background-color change करना चाहते है तो background-color property है और जो आप value देंगे वो इसकी value होगी।

property:value

जैसा की मैने ऊपर बताया inline style sheet में आप style attribute यूज़ करते है और internal और external CSS के लिए <script> tag के साथ selector यूज़ किये जाते है। Selector उस tag का नाम होता है जिस पर आप CSS apply करना चाहते है।