CSS - Class Selectors

Quiz

Class Selectors in CSS

CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using a period (.) followed by the class name.

Syntax

The syntax for CSS class selectors is as follows:

.classname {
    /* property: value; */
    background-color: #04af2f;
}

Basic Class Selector

To apply a background-color and text color to elements with a specific class, we have used a basic class selector.

Example

The following example applies the background color and text color to all elements with the class container.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Class Selectors</title>
    <style>
        .container {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p class="container">This is a paragraph with class.</p>
    <p>This is a paragraph without class</p>
</body>
</html>

Multiple Class Selectors

We can use multiple classes with any element. All the classes are separated by dot. It works only when all the class name matches.

Example

The following example adds a border and background color to div 1 and div 2 remains with default styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .bdr.bgColor {            
            border: 2px solid black;
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <div class="bdr bgColor">
        This is div with background color and a border.
    </div>
    <br>
    <div class="bdr">
        This is div with default styles.
    </div>
</body>
</html>

Combining Class Selector with Other Selectors

Class selectors can be combined with other selectors to select specific elements.

Example

This example sets the font size and font family for only p elements having a class name container.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        p.container {
            font-size: 16px;
            font-family: Verdana, sans-serif;
            color: #04af2f;
        }
    </style>
</head>
<body>
    <p class="container">This is a styled paragraph element.</p>
    <div class="container">This is a div without any style.</div>
</body>
</html>

Combining Multiple Classes

We can use multiple classes on any element to add different styles using different classes.

Example

Here is an example where we have used two different classes on div element to add a border and background color.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .bdr {
            border: 1px solid black;
            font-size: 16px;
            font-family: Verdana, sans-serif;
        }
        .bgColor {
            background-color: #04af2f;
            color: white
        }
    </style>
</head>
<body>
    <div class="bdr bgColor">
        This is a div with a border and background color.
    </div>
</body>
</html>

Using Class Selectors with Media Queries

We can create a responsive design by using class selectors with media queries.

Example

Here is an example where the background color of the web changes depending on the screen size.

<html>
<head>
    <style>
        .bgColor {
            background-color: rgb(96, 5, 26);
            color: white;
        }
        @media (max-width: 800px) {
            .bgColor {
                background-color: #04af2f;
                color: white;
            }
        }


        @media (max-width: 700px) {
            .bgColor {
                background-color: #031926;
                color: white;
            }
        }
    </style>
</head>
<body>
    <p class="bgColor">
        Try different screen sizes to see 
        change in background color.
    </p>
</body>
</html>

Print Page