CSS selectors allow you to select and manipulate HTML elements based on their element name, class name, id name, and attribute value.
The Element Selector selects HTML Elements based on their element name. For example, you can select all <p> tag/elements on a page shown in the below example:
Example: To Style all paragraph with centered align and red color.
An id selector uses the id attribute to style a particular HTML element. An id should be unique within a HTML page, So, the id selector is use to select a single element. An ID Selector starts with the hash (#) symbol, followed by a id name, and then style definition.
The style rule below will be applied to the HTML element with id="para1":
Class Selector is useful when you want to apply formatting to different HTML elements with the same format. The class selector starts with a period (.) character followed by the class name, and then style definition.
Example 1: All HTML elements with class="center" will be center-aligned:
Example 2: All <p> elements with class="center" will be center-aligned.Output:
Class names are usually given to groups of elements instances sharing some common style whereas ID is used to identify one specific instance of an element.
Grouping technique is useful when you are using the same style to different HTML tags.
"Without grouping, the syntax would be":
It can be grouped, to minimize the code. To group selectors, separate each selector with a comma.