Loading

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