Class Selectors

Written by

in

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a paragraph with class.&lt;/p&gt;&lt;p&gt;This is a paragraph without class&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is div with background color and a border.
&lt;/div&gt;&lt;br&gt;&lt;div class="bdr"&gt;
    This is div with default styles.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a styled paragraph element.&lt;/p&gt;&lt;div class="container"&gt;This is a div without any style.&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is a div with a border and background color.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="bgColor"&gt;
    Try different screen sizes to see 
    change in background color.
&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts