HTML has a **`class` attribute** that is used by CSS to assign different properties within one block so that it can be assigned to any element. Once assigned a specific `class`, these elements will have all the properties that are attributed to that particular `class`.
$$$$

# Why are classes important? 

* Using a `class` in CSS allows the user to apply the same style to multiple elements without having to repeat blocks of CSS code. 
* More than one `class` can be assigned to an element, hence they can have multiple styles. 
* It is easier to change the formatting of a `class` as opposed to having to change it for multiple elements
* One `class` can be assigned to different types of elements like a paragraph or a heading style and hence create design coherence if need be

# How to declare a class

Any `class` is declared by preceding the class name with a (`.`). The code below shows how to do this.

>**Note:** A class name is case-sensitive

<html>
 <head>
     <style>
         .exampleClass{
            //properties are written here
         }
     </style>
 </head>
 <body>
 </body>
</html>

codemirror

# How to assign a class

Now that we know how to declare a `class`, we will learn how to assign it to a particular element. The example below shows how to do this. 

* From *lines 4 to 8* the `exampleClass` is defined and assigned particular properties
* The `exampleClass` is assigned to an element in *line 12*

* The same type of element is declared on *line 13* but it does not have any `class` assigned to it

<html>
 <head>
     <style>
         .exampleClass{
             background-color: green;
             color: orange;
             font-size: 30px;
         }
     </style>
 </head>
 <body>
   <p class = "exampleClass">With class assigned</p>
   <p>Without class assigned</p>
 </body>
</html>

# Examples
$$$$

## 1. Assigning the same class to multiple elements

<html>
 <head>
     <style>
         .exampleClass{
             background-color: green;
             color: orange;
             font-size: 30px;
         }
     </style>
 </head>
 <body>
   <p class = "exampleClass">With class assigned</p>
   <p>Without class assigned</p>
   <h1 class = "exampleClass">Class is also assigned to this</h1>
 </body>
</html>

## 2. Assigning multiple classes to the same element

<html>
 <head>
     <style>
         .exampleClass1{
             color: orange;
             font-size: 30px;
         }

         .exampleClass2{
             background-color: green;
         }
     </style>
 </head>
 <body>
   <p class = "exampleClass1 exampleClass2 ">With both classes assigned</p>
   <p class = "exampleClass1">With exampleClass1 assigned</p>
   <p class = "exampleClass2">With exampleClass2 assigned</p>
 </body>
</html>

The "class" attribute in CSS

Using class in CSS applies shared styles across multiple elements efficiently, with flexible, case-sensitive names, enabling streamlined, coherent design changes.