Class-Selector
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