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

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  