How to use the same name classes but in separate styles

Question

see the example to understand:

    <!--Standard Bootstrap -->
    <link href="/build/css/site/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/build/css/site/mdb.min.css" rel="stylesheet">

so i want a thing like it:

    <div class="btn btn-danger" >Standard Bootstrap Button</div>
    <div class="btn btn-danger" >Material Design Bootstrap Button</div>

The name of the classes are the same. But they are in two separate styles. How can I use the two styles as I said?

Forgive me for the bad English.

Answer 1

You can't, you will allways get the last definition of the class. This is how style-sheets work, That's why they are called CASCADING Stylesheets. So basically what you define in mdb.min.css extends or overwrites what is definied in bootstrap.min.css And yo will get the combination of both

Let's say in bootstrap.min.css you have this :

btn-danger:{
   color:#FF0000;
   width:100px;
}

and in mdb.min.cs you have

btn-danger:{
   background-color:#00FF00;
   width:120px;
}

Your browser will interpret this:

btn-danger:{
   color:#FF0000;
   background-color:#00FF00;
   width:120px;
}

The width will be overwritten by mdb.min.css because that one is added last, the later you add a stylesheet, the more precedence it has, so it will overwrite everything that was defined earlier, and extend everything that hasn't been defined earlier, and merge everything else