Why use multiple classes in html? - html

Question

I am new to programming, I don't understand why should we use multiple classes in HTML. I mean in any way even if it is one class or multiple class, all CSS style is going to apply to the same content/text only, then what's the use of multiple classes when a single class will do the same thing?

Answer 1

You use multiple classes to keep you code DRY (Don't Repeat Yourself) for instance lets say you have two buttons a blue primary button and a red secondary button.
.red-button {
background-color: red;
border-radius: 3px;
color: #fff;
padding: 10px;
}
.blue-button {
background-color: blue;
border-radius: 3px;
color: #fff;
padding: 10px;
}
Here you have repeated css.
With multiple classes you can do something like
.button {
border-radius: 3px;
color: #fff;
padding: 10px;
}
.button.red {
background-color: red;
}
.button.blue {
background-color: blue;
}

Answer 2

It allows you the ability to re-use classes where you need similar characteristics. If you wrote the styles individually for each element, you would have a lot of duplicate code

Answer 3

A class is a way of marking an element as part of a group. Something can belong to multiple groups.
.agent {
background: #afa;
margin: 5px;
padding: 5px;
width: 10em;
list-style: none;
}
.double-agent {
background: #faa;
}
<ul>
<li class="agent">Edger Raven</li>
<li class="agent">Simon Sly</li>
<li class="agent double-agent">Sergei Skripal</li>
<li class="agent double-agent">Belgian Butcher</li>
<li class="agent">Jack the Mechanic
</li>
</ul>

Answer 4

I think you want to ask this:
.a{
height:20px;
width:50px;}
.b{background:red;}
<div class="a b"></div>
Why did I use "a" and "b" instead of just using "a" and applying the code of .b{} in .a{}
Consider this case:
.head{font-size:50px;}
.green{color:green;
margin:100px;}
<p class="head">This is an example</p>
<p class="head green">Hello World!</p>
<p class="green">i love maths</p>
<p class="green">3+3=3!</p>
So I wanted to make some content green, and some content big. The "Hello World!" line had both. That is why I used 2 different classes, so I won't have to repeat the same code again for "Hello World!"
The example I gave was a pretty lame one, but yes, you will have to use multiple classes so that you can use the same CSS code for other tags in your HTML without repeating the code.