ID selectors, Class selectors
The role of a selector is to tell the browser to which style is applied to a specific element in an HTML document. Selectors are patterns used to select the HTML tags that you want to style. These patterns may range from simple element names to rich contextual patterns.
ID selectors in CSS allow you to target elements (Tags) by their ID values. ID selectors are unique, so you can apply only to the content of one element. To reference an ID, you precede the ID name with a hash mark (#).
The Class selector in CSS , which references the class attribute used on HTML elements. The Class selector begins with a dot(.) and followed by a class name which you choose.
Unlike the id attribute, multiple elements may share same class name, also an element may belong to more than one class.
Class in multiple elements
Paragraph in class selector
Heading in Class Selector
In the above code multiple element shared same class name (.textcolor).
Multiple Classes in the same Element
Paragraph in class textcolor1
Paragraph in class textcolor2
In the above code same element implement different class name (.textcolor1 and .textcolor2).
Classes limit to one type of Element
Using Class Selector, you can limit the scope of the style sheet (CSS) rule to only that type of element.
In the above code, the selector matches any h1 elements that have a class attribute containing the word "textcolor". If any other element have the class name "textcolor" wont work.
From the above image, you can understand how to use Class Selectors in CSS effectively for styling HTML documents.