CSS Syntax & Selector in Hindi – Part 1

आज इस आर्टिकल में हम आपको CSS Syntax & Selector in Hindi – Part 1 के बारे में बताने जा रहे है. पिछले आर्टिकल में हमने आपको CSS की introduction दी थी, जिसको आप भली भांति समझ गए होगे की CSS का इस्तेमाल हम क्यों करते है.

अब हम CSS के Syntax बारे में बात करेंगे की इसको लिखने का क्या तरीका है जिससे आप इसका इस्तेमाल करके अलग अलग style apply कर सकते है.

CSS Syntax in Hindi

CSS के Syntax लिखने के लिए आपको 3 चीजों का ध्यान रखना पड़ेगा. 1. Selector 2. Property 3. Value. इसको लिखने का तरीका हम आपको नीचे बता रहे है.

इसमें सबसे पहले हमने selector का नाम लिखा है जिसके बारे में हम आपको आगे बताएँगे. selector का नाम लिखने के बाद में आपको {} के बीच में अपनी declaration लिखनी है और हर declaration के समाप्त होने के बाद में आपको semicolon(;) से दूसरी declaration को अलग करना है.

Declaration में 2 चीजे रखी जाती है जिसमे सबसे पहले आपको property बतानी होती और इसके बाद में आपको उसकी value बतानी होती है और इन दोनों को combine करने के लिए CSS में Colon (:) का इस्तेमाल किया जाता है.

अब हम आपको Selector के बारे में बताने जा रहे है.

CSS Selector in Hindi

CSS में किसी element पर कोई style को इस्तेमाल करने के लिए सबसे पहले हमें उस element को find या सेलेक्ट करना पड़ता है और इसके लिए हम उस element का name, id name, class name को CSS फाइल में लिखकर उस element पर style apply कर सकते है.

हमने HTML का पूरा course complete कर लिया है जिसमे हमने HTML element, Element id और element class name के बारे में पढ़ा था और हमने आपको वहां पर यह भी बताया था इसका इस्तेमाल हम किसी भी element को CSS या javascipt में target करने के लिए कर सकते है. हम आपको यहाँ पर एक एक करके तीनों का इस्तेमाल करके दिखायंगे ताकि आपको पता लग जाए की इनका इस्तेमाल कैसे किया जाता है.

CSS – Element Selector

हमने HTML में element के बारे में पढ़ा था जैसे <h1>, <h2>, <p>, <table>, <div>, <header> इस तरह के बहुत से element के बारे में हमने आपको HTML Course in Hindi में बताया था.

इसका इस्तेमाल करके हम HTML element पर अलग अलग तरह के style का इस्तेमाल कर सकते है. इसका छोटा सा उदहारण हम आपको नीचे दे रहे है.

p {
  text-align: center;
  color: red;
}

या

h2 {
  text-align: right;
  color:blue;
}

इस प्रकार हम किसी element को सेलेक्ट करके उसके style या उसके default layout को चेंज कर सकते है. इसके अलावा है अगर हमें एक जैसे style कई element पर एक साथ लगाना है तो हम comma (,) का इस्तेमाल करके element का group बना सकते है. जैसे-

h1, h2, p, div {
            text-align: center;
            color: red;
}

CSS – id Selector

हमने HTML course में id attribute के बारे में पढ़ा था जिसका इस्तेमाल करके हम किसी एक element को सेलेक्ट करके उस पर कोई भी unique style को declare कर सकते है. इसका इस्तेमाल तब किया जाता है जब आपको एक ही element कोई स्पेशल style define करना हो. आप id का इस्तेमाल multiple html element में इस्तेमाल ना करे.

CSS में id attribute की value सेलेक्ट करने के लिए आपको (#) का इस्तेमाल करना है. आपको # के बाद में उस id का नाम लिखना जो आपने html element में दिया था. जैसे-

HTML Element-

<div id="new_style"></div>

CSS-

#new_style{
     width:200px;
     height:400px;
    background-color:red;
}

इस प्रकार हम एक element पर कोई भी unique style लगा सकते है.

CSS – Class Selector

Class के बारे में हमने आपको HTML के tutorial में बताया था की इसका इस्तेमाल multiple element पर design देने के लिए किया जाता है या इसका इस्तेमाल आप कई element पर एक जैसा style देने के लिए कर सकते है. यह element selector से थोडा अलग होता है क्योकि जिसमे हम classname का इस्तेमाल करेंगे उसी में आपका style अप्लाई हो जाएगा चाहे वह को <p> element हो या फिर <h1> element.

इसको css में सेलेक्ट करने के लिए हमने Full Stop (.) का इस्तेमाल करना होगा.

HTML Element-

<h1 class="new_class">Heading 1</h1>
<p class="new_class">Paragraph</p>

CSS-

.new_class{
       font-size:120%;
       font-weight:bolder;
       color:#ddd;
}

इस प्रकार हम class selector का इस्तेमाल करते है इससे जुड़े और भी example हम आपको आगे बताएँगे.

Specific Class & id Selector

इसका इस्तेमाल तब किया जाता है जब आपको किसी specific tag में इस्तेमाल किये गए classname या id को सेलेक्ट करना हो. जैसे

Specific Class CSS-

p.text_center{
      text-align:center;
}

Specific id CSS-

h1#right_text{
     text-align:right;
}

Universal Selector

यह element तब इस्तेमाल किया जाता है जब हमने सभी element पर एक जैसा style देना हो. इसको सिर्फ * से सेलेक्ट करके आप पुरे डॉक्यूमेंट पर style अप्लाई कर सकते है या फिर आप किसी element के अन्दर (nested element) सभी element पर style अप्लाई करना चाहते है.

CSS-

*{
 color:red;
 background-color:yellow;
}

या

div *{
 color:red;
 background-color:yellow;
}

इस प्रकार हम selector का इस्तेमाल करके अपने specific element पर style अप्लाई कर सकते है.

CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2>>>>>>