CSS class Selector

CSS class selector styles all the HTML elements with the specified class attribute. Using CSS Classes makes it easy to select HTML elements when applying the same style to different HTML tags.

The class selector can be implemented by writing it with the dot (.) character, trailing with the class name.

Syntax:

.class_name{
/* declarations */
}

Below is an example of a class selector implemented on a paragraph tag:

CSS Class Selector Example

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            .text { font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#666699; } 
        </style>
    </head>

    <body>
        <!-- On these elements, the class selector will be applied. -->
        <p class="text">This is a Customized Style using class.</p>
        <p class="text">This is another Customized Style using class.</p>
    </body>

</html>

While applying the class selector, you can add the class element to the HTML tag, as demonstrated in the example above.

Class Selector for a Specific HTML Element

You can also specify the class to work for specific HTML elements, which will be affected when using element names along with your class selector.

Here's a sample example of how to implement this specific class selector concept.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            p.text { font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#666699; } 
        </style>
    </head>

    <body>
        <h2 class="text">Second level heading with no effect of the CSS class selector.</h2>
        <p class="text">This paragraph will be affected because the style was specifically mentioned for the paragraph.</p>
    </body>

</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram