CSS selectors

IN CSS there are several types of selectors by which we can give styling to our HTML elements. Through these selectors we can choose our HTML elements and give them styling as we want.
Some of these selectors are as follows :-

• CSS element selector
• CSS Id selector
• CSS Class selector
• CSS Group selector
• CSS Universal selector

Let's talk about these selectors one by one :-

Element selector

Here through selecting particular element we can give style to that particular element

Let's understand this by the following program :-

Output of the program

So we can see the changes here by just giving styling through selecting the "p" element only.

Id selector

Here we just include id attribute in an HTML element and than through this id selector we can give styling to any element. And to select this selector we use the '#' followed by the id name. And the id name must be used once in one page.

Let's understand this by the following program :-

Output of the program

So we can see the changes here by just giving styling using the id selector.

Class selector

Here we just include class attribute in an HTML element and than through this class selector we can give styling to any element. And to select this selector we use the '.' followed by the class name. But we can use multiple times the same class name if in order to give the same styling to every elements.

Let's understand this by the following program :-

Output of the program

So we can see the changes here by just giving the styling using the same demo class.

Group selector

If in case we want to provide the same styling to our different-different selectors than that time we can also select all the elements in which we want our styling and can separate them by commas and include the same styling.

Let's understand this by the following program :-

Output of the program

So we can see the changes here by giving both h1 and p element the same styling.

Universal selector

If we want to select all the elements of the webpage than we can use the universal selector which we use to denote by the '*' sign.

Let's understand this by the following program :-

Output of the program

Through this universal selector(*) we can give styling to every elements inside the body.