Class Selector

A class selector is used to apply the same CSS styles to one or more HTML elements.

What is a Class Selector?

A class selector targets HTML elements that have a specific class attribute.

In CSS, a class selector starts with a dot (.) followed by the class name.

Class Selector Flow

HTML Element
class="title"

↓

CSS Class Selector
.title

↓

Applied CSS Style

Basic Syntax

.class-name {
    property: value;
}

The dot . identifies the selector as a class selector.

Example 1: Styling a Class

The following CSS applies blue color to elements having the title class.

.title {
    color: blue;
}

Output

Welcome CIIT Institute 🤓❤️..!

Example 2: Class Used on Multiple Elements

The same class can be applied to multiple HTML elements.

.highlight {
    color: green;
}

Output

First paragraph

Second paragraph

Example 3: Class with Multiple CSS Properties

.box {
    background-color: lightblue;
    padding: 15px;
    border: 1px solid blue;
}

Output

This is a styled box.

Important Points

A class selector starts with a dot ..
The class name must match the HTML class attribute.
The same class can be used on multiple elements.
One HTML element can have multiple classes.
Class selectors are commonly used for reusable styles.

Summary

A class selector is used to style HTML elements that share the same class name. It begins with a dot followed by the class name and can be reused across multiple HTML elements.