Introduction to CSS and CSS Selectors

CSS (Cascading style sheets) is used to style and lay out web pages. CSS is used to describe how HTML elements can be displayed
on the web page. For example if you want to alter the font, color, size and other decorative features.

CSS Selectors:
CSS selectors select the HTML elements we want to customize.
In CSS, selectors are used to target the HTML elements which we want to style. There are following types of selectors:

1. Universal Selector:-
As the name suggests, Universal Selector in CSS is used to select all the HTML elements such as <p>,<h1>,<img>,<li> etc. Therefore,
the Universal selector can affect to the entire HTML elements on a web page.
(*) asteric symbol donates the universal selector in CSS.

What is the use of UNiversal Selector:

It is used to miantain the consistent styles on the browsers.Because each browser has its own style.
You will never have to select each element and apply the style.By using Universal selector you can style the entire web page
& avoid too much work.

Syntax:
The syntax of Universal Selector is as follows:

* {
property: value;
}

2.Individual Selector:
You can address any element like <div>,<span>,<li>,<p> etc. As the name suggests, the Individual selector in CSS selects a particular or individual element on the web page.

What is the use of Individual selector:
If you want to target or style a particular element, you can use Individual selector.So that only that element will get affected.

Syntax:-
The syntax of Individual selector is as follows:

element {
property:value;
}

3. Class and ID selector:
A class selector in CSS is used to select HTML elements based on their class names which are specified as an attribute within an HTML tag.
The class name is preceded by a dot(.) like .test. Multiple elements may have the same class attribute so by using class slector, it will
affect all the HTML elements of that particular class. A class name can be any string value having uppercase or lowercase letters, digits, hyphen, and underscore.
A CSS class name cannot have a space within it
_
What is the use of class selector?_
We can select the multiple elements with same classname & apply same style to them.
Class selectors are used to add specific styles to elements based on their specified class name.

Syntax:
we can declare classname in HTML elements by using class attribute is as follows:

<element class="classname"></element>

We can add CSS styles by using above example of class attribute:

.classname{
property:value;
}

ID selector:
By using ID selector, we can assign a unique identifier to an HTML element & we can style it by referencing the unique identifier. The ID selector uses the ID attribute
of an HTML element to select a unique element. Use (#) sign followed by the ID of the HTML element. This ID should be unique within the page.ID selector and ID name must be same.

Syntax:
The syntax of ID selector is as follows:
.ID name{
property:value;
}

4. And selector(chained):-

Dot(.) works as AND. We can target a particular element by using the AND selector.It is useful when you have multiple elements with same properties.
example:
li.bg-black.text-white{
background-color: #000000;
color: #efg3232
}

5. Combined Selector:
By using Combined selector you can target multiple elements at the same time by using (,) comma.
syntax:

We can use Combined selectors by using comma as follows:

element1,element2{
property:value;
}

Example:

span,li{
background-color: burlywood;
}

6. Inside an element:
By using Inside an element selector we can target the elements with the order we want by using just space. Don't need comma or anything use just space.

Syntax:
element1 element2 element3{
property:value;
}

example:-
div ul li{
background-color:#4b35f1;
}

7. Direct child:-
The direct child selector is used to select the direct child of the specified element. The direct child selector is represented by the greater than(>) sign. You can use (>) sign
between two elements.

**Syntax:-**
  `element1 > element2 {
  property:value;
  }`

example:-
div > li {
background-color: #7667e4;
}

8.Sibling ~ or + :-

The sibling selector is used to select the adjacent element of the specified element. The sibling is represented by (~) tilde sign or (+) plus sign.

Syntax:-
elemnet1 + element2 {
proprty:value;
}

Example:-
.sibling + p{
background-color: #pink;
}

9. Psuedo elements:
A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

1.Style the first letter, or line, of an element
2.Insert content before, or after, the content of an element.

1. ::before pseudo element:-

The ::before pseudo-element can be used to insert some content before the content of an element.

example:-

h1 :: before{
content: '';
}

2. ::after pseudo element:-

The ::after pseudo-element can be used to insert some content after the content of an element.

example:-

h1 :: after{
content: '';
}