CSS – CSS selectors in Hindi

 हेल्लो दोस्तों आज की इस पोस्ट में आप जानेगे की CSS Selectors क्या होते है और ये कितने प्रकार के होते है | आज की इस पोस्ट में , मै आपको बहुत ही आसान भाषा में बताउगा की CSS Selectors क्या होते है चलिए शुरू करते है -



What is Selectors (  CSS Selectors क्या होते है ? )

Selectors का Use HTML Elements को Target करने के लिए किया जाता है यानि कि इसकी मदद से आप HTML के किसी भी Element के साथ उसकी Style को change कर सकते है  यदि और आसन Words में कहे तो - "A CSS selector selects the HTML element(s) you want to style."

CSS में कई अलग-अलग प्रकार के Selectors होते है 
  1. CSS Elements Selectors 
  2. CSS ID Selectors
  3. CSS Class Selectors
  4. CSS Universal Selectors
  5. CSS Group Selectors

  1. CSS Elements Selectors

    Element Selector, Elements के नाम से  HTML Element select करता है 
    (or)
    "The element selector selects HTML elements based on the element name."



    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
      text-align: center;
      color: purple;
    } 
            
        </style>
    </head>
    <body>
        <p>This style Will be applied on every paragraph.</p>
        <p id="mypara1">it's also</p>
        <p>And Me!</p>
    </body>
    </html>


    Output:

    This style Will be applied on every paragraph.

    it's also

    And Me!

  2. CSS ID Selectors
    ID Selector एक विशेष या special Element को select करने के लिए HTML Element की ID विशेषता के उपयोग करता है 
    एक Element की ID एक page में अंदर Unique ID होती है इसलिए CSS ID Selectors का उपयोग एक unique Element को Select करने के लिए किया जाता है |
    किसी Specific ID (विशिष्ट आईडी) वाले Element को select करने के लिए एक हैश (#) Character लगाये इसके बाद Element की ID का नाम लिखे |

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #mypara1 {
      text-align: center;
      color: purple;
    } 
            
        </style>
    </head>
    <body>
        <p id="mypara1">Welcome to NOOBITHUB</p>
        <p>This Paragraph Will not be affected</p>
    </body>
    </html>


    Output :

    Welcome to NOOBITHUB

    This Paragraph Will not be affected

  3. CSS Class Selector :
    Class Selector एक specific class (विशिष्ट Class ) attribute के साथ HTML Element को select करता है यह एक period character (Full Stop Symbol ".") के साथ use किया जाता है period character के बाद class का नाम लिखा जाता है  यहाँ पर हम class का नाम "noobithub" लेते है तो चलिए शुरू करते है और समझते है -

    Note : Class का नाम कभी Number से Start नही करना चाहिए |

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
      .noobithub {
      text-align: center;
      color: skyblue;
    }
            
        </style>
    </head>
    <body>
        <h1 class="noobithub">Welcome To NOOBITHUB</h1>
        <p class="noobithub">This Paragraph Will not be affected</p>
    </body>
    </html>


    Output :

    Welcome To NOOBITHUB

    This Paragraph Will not be affected

    Example :2 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
      h1.noobithub {
      text-align: center;
      color: skyblue;
    }
            
        </style>
    </head>
    <body>
        <h1 class="noobithub">Welcome To NOOBITHUB</h1>
        <p class="noobithub">This Paragraph Will not be affected</p>
    </body>
    </html>

    Output : 2 

    Welcome To NOOBITHUB

    This Paragraph Will not be affected

    Example : 3

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
      p.noobithub {
      text-align: center;
      color: skyblue;
    }
            
        </style>
    </head>
    <body>
        <h1 class="noobithub">Welcome To NOOBITHUB</h1>
        <p class="noobithub">This Paragraph Will not be affected</p>
    </body>
    </html>

    Output :3

    Welcome To NOOBITHUB

    This Paragraph Will not be affected



  4. CSS Universal Selector
    Universal Selector को हम Asterisk (*) से represent करते है जब हम यूनिवर्सल सिलेक्टर का प्रयोग करेगे तो हम Asterisk (*) character का प्रयोग करेगे 
    Universal Selector सभी Elements को select करता है Universal Selector किसी other Elements के अंदर के Elements को  भी select कर  सकता है 
    तो चलिए उधाहरण से समझते है -

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
      * {
      text-align: center;
      color: skyblue;
    }
            
        </style>
    </head>
    <body>
        <h1 class="noobithub">Welcome To NOOBITHUB</h1>
        <p>Every element on the page will be affected by the style.</p>
        <p class="noobithub">This Paragraph Will be affected</p>

    </body>
    </html>


    Output : 

    Welcome To NOOBITHUB

    Every element on the page will be affected by the style.

    This Paragraph Will be affected

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    div * {
      background-color:purple;
      color:white;
      align-items: center;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

            
        </style>
    </head>
    <body>
        <h1>Welcome To NOOBITHUB</h1>

    <div class="intro">
      <p id="firstname">My name is Sky Baba.</p>
      <p id="hometown">I live in India.</p>
    </div>

    <p>My best friend is AS.</p>
        
    </body>
    </html>


    Output : 

    Welcome To NOOBITHUB

    My name is Sky Baba.

    I live in India.

    My best friend is AS.

     

  5. CSS Group Selector 
    Group Elements का use सभी Elements को एक ही Style Definitions के साथ select करने के लिए किया जाता है हम simply बोल सकते है की कोड को कम करने के लिए Grouping Selector का use किया जाता है इसके साथ हम comma का भी use करते है |
    Comma का use Grouping में प्रत्येक selector को अलग करने के लिए किया जाता है | आप यहा पर 2 Example देखेगे और जानेगे की आखिर क्या अंतर होता है जब हम Group Selector के बिना CSS Code लिखते है और जब हम CSS Code को Group selector के साथ लिखते है 
    तो चलिए देखेते है 
    Group Selector के बिना CSS Code :-

    Example 1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    h1 {
      text-align: center;
      color: purple;
    }

    h2 {
      text-align: center;
      color: purple;
    }

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

        </style>
    </head>
    <body>
        <h1>Welcome To NOOBITHUB</h1>

        <h2>Second Heading!</h2>
        <p>This is a paragraph.</p>
        
    </body>
    </html>

    आप उपर  देख सकते है यहाँ पर  Group Selector के use के बिना CSS Code काफी अधिक हो गया है 

    Output : 

    Welcome To NOOBITHUB

    Second Heading!

    This is a paragraph.

    तो चलिए अब हम Group selector का use  करके CSS Code देखते है 

    Example :2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    h1, h2, p {
      text-align: center;
      color: purple;
    }

        </style>
    </head>
    <body>
        <h1>Welcome To NOOBITHUB</h1>

        <h2>Second Heading!</h2>
        <p>This is a paragraph.</p>
        
    </body>
    </html>


    Output :

    Welcome To NOOBITHUB

    Second Heading!

    This is a paragraph.



    दोस्तों आप देख सकते है की जब हमने Group Selector का use करके CSS Code लिखा तो Code काफी Short  हो गया , यानि की जहा काफी सारी line का code लिखना होता था अब Group Selector के  प्रयोग से सारा code एक line में सिमिट  गया |

    दोस्तों  मै आशा करता हू कि "CSS – CSS selectors in Hindi" यह पोस्ट आपको पसंद आई होगी और दोस्तों अगर आपको  "CSS – CSS selectors in Hindi " इस Post से लेकर कोई सवाल है  तो  आप हमसे comment के माध्यम से पूछ सकते है 
    दोस्तों अगर आपको "CSS – CSS selectors in Hindi" हमारी ये post अच्छी लगी हो, तो अपने दोस्तों के साथ इस पोस्ट को share करे | यदि आप हमारी आने वाली Latest Post का Notification पाना चाहते है तो  इसके  के लिए आप हमे follow कर सकते है |


    **Thank You** 







      

Location: India

Comments

Post a Comment

Popular posts from this blog

What is Computer and which is the first computer

Image
What is Computer Computer is an electronic device that is designed to work with  Information. The term computer is derived from the Latin term ‘ compute ’, this means to calculate or programmable machine. Computer cannot do anything without a Program. It represents the decimal numbers through a string of binary digits. The Word 'Computer' usually refers to the Center Processor Unit plus Internal memory. Who was the father of computer? Charles Babbage is called the " Grand Father " of the computer. The First mechanical computer designed by Charles Babbage was called Analytical Engine. It uses read-only memory in the form of punch cards. Charles Babbage How it's work: Computer is an advanced electronic device that takes raw data as input from the user and processes these data under the control of set of instructions (called program) and gives the result (output) and saves output for the future use. I...
Read more

How To Create a Folder & Rename a Folder & Delete a folder

Image
  WORKING WITH FILES AND FOLDERS Files are the individual documents that you save from within an application, such as Word and Excel, and you use folders and sub-folders to organize several files into groups or categories, such as by project or by customer. The purpose of a file system, of course, is to locate and use the files and folders on your computer. A folder is a container for storing programs and files, similar to a folder in a file cabinet. As with a file cabinet it is frustrating and time-consuming to search through irrelevant, misnamed, and out-of-date files to find the one you want. Windows allows you to organize folders and files in a file hierarchy, imitating the way you store paper documents in real folders. Using the file management tools, you can save files in folders with appropriate names for easy identification, quickly and easily create new folders so you can reorganize information and delete files and folders that you no longer need. You can also search for ...
Read more