Search code examples
htmlcsscoding-style

Why use multiple classes in html?

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?

Solution

  • 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.