CSS in Hindi – Introduction of Selectors, Introduction to CSS selectors in Hindi learn by myhindiexam

CSS in Hindi – Introduction of Selectors

Introduction to CSS selectors in Hindi
Types of CSS selectors in Hindi
Introduction of Selectors in Hindi

Introduction of Selectors

Css मे selector का बहुत ही important role होता है | क्योकि बिना selector के internal css या external css नही लिख सकते है |

जब भी हम internal css या external css लिखते है | तो किसी न किसी tag के ऊपर ही css लिखते है | या फिर apply करते है | तो browser को कैसे पता चलेगा किस tag पर css apply करना है |

जब भी internal css या external css लिखते है | तो हम selector का use करते है | browser को यह बताने के लिए की किस tag पर css apply करना है |

internal css या external css दो प्रकार से लिखते है | लेकिन दोनों मे लिखा गया css same ही रहेगा लेकिन दोनों का काम अलग अलग रहेगा |

<style> tag

जब भी हम css लिखते है | तो सबसे पहले <style> tag create करते है | क्योकि बिना style tag के internal css नही लिख सकते है | निचे example दिया जा रहा है |

<style type="text/css">
       h1 { background: red; }
</style>

उसके बाद हमे दो { } use करना पड़ता है | इसे हम opening और closing brackets कह सकते है इन्ही दोनों brackets के अन्दर css लिखा जाता है |

Types of Selectors

CSS मे कई प्रकार के selectors दिये गए है जिनका यूज़ करके और भी अछे से css लिख सकते है। इन selectors के बारे में full details दिया जा रहा है।

Element Type Selectors

Element Type Selectors के द्वारा html के किसी एक tag पर css apply किया जाता है | इस type के selectors का नाम उसी HTML tag का नाम होता है। जिस tag पर css apply करना चाहते है | निचे example दिया जा रहा है | ध्यान से देखे |

<!DOCTYPE html>
<html>
<head>
       <title>Easy Hindi Tutorials</title>
       <style type="text/css">
         h1 { background: red; }
    </style>
</head>
<body>
<h1>Easy Hindi Tutorials</h1>
</body>
</html>

Important Notice :- Element Type Selectors मे एक problem भी होता है | अगर आपके body tag के अन्दर एक से जादा heading tag है | और heading tag पर css apply करते है | तो सारे heading पर css apply हो जाएगी | क्योकि आप css heading tag पर apply कर रहे है और आपके body tag के अन्दर एक से जादा heading tag है |

Class Selectors

html मे हर एक tag एक class attribute define करता है | और इसी class attribute के द्वारा html के किसी भी tag पर css apply कर सकते है |

लेकिन जब हम किसी tag का class define करते है | तो css लिखने के लिए सबसे पहले एक ( . dot ) type करना पड़ता है | उसके बाद हमे उस attribute का name type करना पड़ता है | जिसे हम class attribute मे define किये है | निचे example दिया जा रहा है |

<!DOCTYPE html>
<html>
<head>
       <title>Easy Hindi Tutorials</title>
       <style type="text/css">
         .h1 { background: red; }
    </style>
</head>
<body>
<h1 class="h1">Easy Hindi Tutorials</h1>
</body>
</html>

ID Selectors

<!DOCTYPE html>
<html>
<head>
       <title>Easy Hindi Tutorials</title>
    <style type="text/css">
         .h1 { background: red; }
    </style>
</head>
<body>
<h1 id="h1">Easy Hindi Tutorials</h1>
</body>
</html>

Important Notice :- id हो या class उनका नाम अपने according देते है | आप नाम कुछ भी दे सकते है | यह आपके ऊपर है की tags का नाम क्या देते है |

Universal Selector

Universal selector को हमेसा ( * ) से represent किया जाता है। इस selector के द्वारा apply किया गया css html के सभी tags पर होता है | लेकिन यह तभी काम करता है |

यदि किसी tag पर css apply की गयी है | चाहे वह inline css हो या internal css या external css तो इस selector का कोई effect नही पड़ता है |

<!DOCTYPE html>
<html>
<head>
       <title>Easy Hindi Tutorials</title>
       <style type="text/css">
         * { color: red; }
    </style>
</head>
<body>
<h1>Easy Hindi Tutorials</h1>
<h2>Easy Hindi Tutorials</h2>
</body>
</html>

Attribute Selectors

अगर आप चाहे तो html tags attribute के द्वारा भी css apply कर सकते है | इन selectors का use form tag के लिए किया जाता है।

<style>
img[alt=”img1”]{
width:600px;
height:300px;
}
</style>

Group Selectors

अगर आप चाहे तो एक से जादा tags पर एक साथ ही css apply कर सकते है | इन्हें हम group selector भी कहते है | निचे example दिया जा रहा है |

<style>
table,th,td {
color : red;
}
</style>