Intro to CSS

There are several ways to start with CSS but we should go with the most ideal way which is simplified as follow:
Universal Selector-
In Universal Selector is a Special type selector (A type selector matches an element by node name for Example :
a { color: red;

}

1. Individual Selector-
   In This selector we select the element directly for example:
   h1 { color: green;

   }

2. ID & Classes Selector: In this selector, we select the targeted element by the ID or the Class we have given to the particular element only, Although the ID is the unique selector for the unique element.
   for ID SElection we use
   #btn { padding: 2rem; }

   Whereas, In class we use .btn

   { padding: 2rem;

   }

3. Inside Element: This Selector is also known as a combinator selector
   in which we select the nodes of the descendants of the first element for example:
   div span { color: blue; }
   Here the color of all the span inside the div element will be changed to the color blue.

4. Direct Child: In this selector we select the direct child element for the CSS styling under the particular parent element for example:

   Here i will use:
   div > p {

   color : red; }
   So, Here i'm using > this tag for the direct child which is referring that the direct child of div.

   via GIPHY

5. sibling: In this selector, we select the grandchild of sub child of the element. for example as we can in the upper line the semantic where (li)
   is the sub-child of div and the child of (ul)
   In sibling combinator, we separate two selectors and match the second element only if it follows the first element, and both are children of the same parent for example
   img + p { color: red; }
   Here it will select the p element which is just after the img element.

6. Chained Selector: In this selector, we chained the element in order the select the particular child or sub-child element for example:
   div.li.btn { color: black; }

7. Psuedo Selector ::before: This is very important to add the content as empty and display for the ::before and the same goes for the ::after in order to add the content after the selected target. example

   Here it's very important to set the content as empty and display it for the pseudo-class selector.