Understand The Common and mostly used CSS selectors used while Building a Website.

Only learning the selectors is not enough to start using.
To learn how to use the selectors please read the complete article.

Let's Understand What is Class Selector ?

To add css class selector first you need to add class attribute inside the starting tag of the HTML tag with class attribute and add a value to the attribute as shown in the below example.


           <div class="earth_p1">
           
          </div>

Here class written adter the div is the attribute name and it is assigned a name which is "earth_p1".You must put the class name inside quotes.

Next comes adding properties and values to the css class.

Before this it is assumed that you know how to link html and css.
Every class selector in css is written with a prefix of " . " while every id selector name is written with a prefix of " # ".
Once the class name is mentioned all the properties are mentioned in between a starting and closing curly bracket. as you can see in bellow example.And Every property is separated by a " ; " .


            .earth_p1 {
                      
                      width: 300px;
                      height: 300px;
                      border: 4px solid red;
                      width:865px;
                    
                     }

Remember that css property is executed one after another and it can overide itself.Like in the first line i have mention width:300px; but in the 4th line width:865; so for class .earth_p1 width is 865px.

Let's Understand What is id Selector ?

To add an ID selector in CSS, you need to assign the `id` attribute inside the starting tag of an HTML element. The `id` attribute should have a unique value within the page. Here's an example:


        <div id="earth_id1">
        
        </div>

In this example, the `id` attribute is assigned a name which is `"earth_id1"`. An ID should always be unique and should be enclosed in quotes.

Next, let's see how to add properties and values to the ID selector in CSS.
Similar to class selectors, ID selectors are used to style elements, but ID selectors are written with a prefix of `"#"`. The syntax is as follows:


        #earth_id1 {
                      
          width: 400px;
          height: 400px;
          border: 4px solid blue;
          
        }

In this example, the ID selector `#earth_id1` is used to style the element with specific properties such as width, height, and border.

Let's Understand What is Element Selector ?

A type selector, also known as an element selector, is used to select all HTML elements of a specific type. For example, to style all paragraph (`p`) elements, you would simply use the tag name in the CSS selector without any prefix. Here's an example:


        p {
          color: green;
          font-size: 18px;
          line-height: 1.5;
        }

In this example, the type selector `p` is applied to all paragraph elements, giving them a green text color, a font size of 18px, and a line height of 1.5.

Type selectors are very useful for applying consistent styles to elements across the page. Unlike class and ID selectors, type selectors are not specific to any particular element instance; they target all elements of the given type.