CSS or Cascading Style Sheet represents the designing or presentation of a document written in HTML. CSS can said as the backbone of presentation.

                                                    **CSS SELECTORS**

Now the CSS selectors define the pattern to select elements. CSS selectors is the initial part of the CSS introduction. It is a pattern of elements and other terms that tells the browser which HTML element should be selected to have the CSS property values.

CSS selectors can also be said as the master manipulative of CSS. CSS selectors can be grouped into various categories or CSS selectors having different trigger points.

FIRST---> Universal selector--> Here (*) selects all HTML elements on the Page.

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

First color of all elements should be red and then yellow background is set for all the elements. Universal selector selects any type of elements in an HTML page. A asterisk (*) is used to denote a CSS universal selector. Example---> If we want to change the color of the whole page into green color.

           * {
               background-color : green;
              }

The elements can also be said as p-->paragraph.

SECOND---> Individual selector--> In an individual selector it selects the individual elements that we have selected.

p { background-color : red; } Here p is an element which is being targeted by individual selector. It will target all paragraph in the HTML page and change their background color into red. Example--->Now suppose if we want to change the color of an individual city then city name { background-color : red; } THIRD--->Class and Id selector--> At first (.) dot means class and (#) means id. Class selector selects particular element within a specific class attribute. It means all the HTML elements based on the contents of their class attribute. .tree { background-color: brown; } Here .tree represents class and it will select all the class named tree in the HTML page and their background color changes. ID selector matches an element based on the value of its id attribute. In order for the element to be selected its attribute must exactly match given in the selector.

      #mango tree
                      {
                    background-color : orange;
                      }

Here #mango tree represents id and it will only target the particular element named mango tree and it will change its background color. Example--->As previously discussed in the class selector all the class named tree would be selected but in the id specifically the mango id tree would be selected.

The difference between ID and CLASS is that an ID is only used to identify one single element in HTML. ID'S are only used when one element on the page should have a particular style applied to it. However a class can be used to identify more than one HTML element.
FOURTH--->Chained selector--> It is done by combining multiple selector which we will refer to as chaining (A)-->and selector(chained)--> li . jupiter { background-color : yellow; } Here li element and class jupiter will be combined and will be targeting li .jupiter and it will change its background color. Example--->If we want to target first li element then jupiter named class so the li element in jupiter named class will be targeted. (B)-->inside an element--> This selector is used to select element with a specific parent. div ul li { background-color : red; } Here it will select first select the div then inside it will select ul and then li and it would change its background color. FIFTH--->Direct Child-->

--> This symbol is used for child child combinations. Child selector means select all the elements that are immediate children of a specific parent. It matches only those elements matched by the second selector that are the direct children of element matched by the first. div > li Here if we want to specifically target li under the div then div > li { background-color : green; } This is specific code to write this direct child tag it will change background color of the li element under the div. Example--->If we want specifically select cricketers under the sports then cricketers are the direct child of sports. sports >cricketers SIXTH--->Sibling Selector--> Sibling selector (+) is used to select an element that is directly after another specific element ,sibling elements must have the same parent element and immediate following. .sibling + p { background color : red; } It will select first the

element that are placed immediate after class named sibling. Example--->In any sports team there is first a captain and then vice captain. .captain + vice captain { background-color : red; } SEVENTH (a)--->Before pseudo Selector--> : : before-->This code is used in case of before pseudo selector In CSS :: before creates a pseudo element that is the first child of the selected element or in other words it inserts something before the content of each selected elements. li: : before { background-color : red; } Example--->In a cricket match if a team looses before blaming the whole team we blame the caption of the team. SEVENTH (b)--->After pseudo Selector--> : : after-->This code is used in case of after pseudo selector. In CSS : : after creates a pseudo element that is the last child of the selected elements it inserts something after the content of each elements. li : : after { background-color : red; } Example--->In a cricket match if a team wins a world cup after the team only captain is given credit.

#iwrite code