Class Selector

In CSS a class selector is used to target one or more HTML elements that share the same class attribute value.
Unlike ID selectors, class selectors allow you to apply the same styles to multiple elements on a webpage.
Elements can have multiple classes, and you can use a single class selector to target any element with a specific class.

Syntax:

.className {
   /* CSS properties and values */
}

.className is the selector, where you replace "className" with the actual class name you want to target.
Inside the curly braces {}, you can specify the CSS properties and values you want to apply to the selected elements.

Example:

<!DOCTYPE html> 
<html> 

<head> 
	<style>
		.center {
			text-align: center;
			color: blueviolet;
		}
	</style> 
</head> 

<body> 
	<h1 class="center">This heading center-aligned.</h1>    
</body> 

</html>

Output:

This heading center-aligned.

Key Points:

If we want to make only one HTML element should be affected then we use that element name with the class selector.

Example:

<!DOCTYPE html> 
<html> 

<head> 
	<style>
		p.center {
			text-align: center;
			color: blue;
		}
	</style> 
</head> 

<body> 
	<p class="center">Welcome to Quipoin</p> 
</body> 

</html>

Output:

Welcome to Quipoin