Tutorial Article

CSS Class Selector

The CSS Class Selector is used to style specific HTML elements that have a class attribute.Unlike the element selector, which targets all elements of a type, the class selector allows you to apply styles to only selected elements, giving you more control and flexibility. A class can be used multiple times on a page. Class […]

Mar 31, 2026CSSCSS SelectorsTutorials

The CSS Class Selector is used to style specific HTML elements that have a class attribute.
Unlike the element selector, which targets all elements of a type, the class selector allows you to apply styles to only selected elements, giving you more control and flexibility.

A class can be used multiple times on a page.

Class selectors are defined using a dot (.) followed by the class name.

Class Selector Syntax

.classname {
    property: value;
}

Class Selector Example

.highlight {
    color: red;
    font-size: 20px;
}

👉 This will apply styles to all elements with class="highlight".

Attributes

Property	Description	Example
color	Sets text color	color: blue;
background	Sets background color	background: yellow;
font-size	Sets text size	font-size: 18px;
padding	Adds inner spacing	padding: 10px;
border	Adds border	border: 1px solid black;

Example

Complete Example of CSS Class Selector

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class Selector</title>
    <style>
        .highlight {
            color: red;
            font-size: 20px;
        }

        .box {
            background: lightgray;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <h1 class="highlight">Class Selector Example</h1>

    <p class="highlight">This paragraph is highlighted.</p>

    <p>This paragraph is normal.</p>

    <div class="box">This is a styled box.</div>

</body>
</html>

Output

Browser Output

Elements with class highlight will appear in red color with larger text
The <div> with class box will have a light gray background, padding, and border
Elements without the class will remain unchanged

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

Class selector starts with a dot (.)
A class can be used on multiple elements
An element can have multiple classes (e.g., class="box highlight")
Class names should not start with numbers
Best practice: use meaningful and reusable class names

Conclusion

The CSS Class Selector provides flexibility and control by allowing you to style specific elements without affecting others. It is one of the most commonly used selectors in modern web development.