Two CSS Files Defining Same Class

Two css files defining same class

The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.

The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.

For the property, here's an example:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css

is equivalent to:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }

Rewriting CSS to SASS problem: same class definition in two css files

Try to nest that .first-line class in both the files (parent would be diff while nesting) ..... so while compiling into single file, it wont cause a problem

conflict between the same class or id of multiple css files

You could apply the cascading rules of the CSS:

In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.

you adjust the reload.css rules to

.dynamic .myClass{height: 30px; width: 25px; background: yellow; }

The cascading rules which are applied when determine which rules should apply to html div could be referenced here

Updated 11.23

As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:

body > .myClass {...}

This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.

Two Css Files Have Same Class - Remove class from particular Class, How?

As already stated in the comments, loading unwanted CSS rules to disable them always and also apply new rules to be the same as another existing rule is a VERY BAD PRACTICE. If you really don't want or can't do it another way, like modifying the existing CSS or adding new CSS rules, you could do this with jQuery:

with jQuery:

$(document).ready(function() {

    $('.text').css({'font-family':'verdana', 'font-size':'11px', 'padding':'0', 'margin':'0'});

});

Demo: https://jsfiddle.net/chimos/6g9xmxxo/

So here it's giving padding and margin default values (this can be very problematic if you want .text to use other values for margin and padding at some point).
And font-family and font-size are defined as in the first CSS rule (this can be very problematic for manteinance, since you have duplicated code and you -or the editor/mantainer- will need to remeber that always to keep things working).

load and apply same css class from two different files on two different elements

It is really not a good idea to try and parse your CSS using javascript, instead just use CSS for what it's very good at, selectors.

The best option is to prefix every rule in each file. So if you have light-theme.css and dark-theme.css then every rule in light-theme.css would start with something like .light-theme (and the same goes for dark-theme.css -> .dark-theme).

Once each rule is prefixed accordingly you can include both files and just add a class based on which CSS file you want to take effect.

/* Shared styles */#content {  height: 400px;  width: 400px;}#content > div {  width: 200px;  float: left;}ul {  list-style: square inside;}li {  height: 40px;}


/* light-theme.css */.light-theme li {  color: #339;  background-color: #fff;}


/* dark-theme.css */.dark-theme li {  color: #ccf;  background-color: #333;}

<div id="content">  <div class="light-theme">    <h2>Light</h2>    <ul>      <li>Red</li>      <li>White</li>      <li>Blue</li>    </ul>  </div>  <div class="dark-theme">    <h2>Dark</h2>    <ul>      <li>Alpha</li>      <li>Beta</li>      <li>Gamma</li>    </ul>  </div></div>

Using two css files in the same html file

Yes this is possible, simply include two css files in the HEAD section of the document. Any styles set in the first will be overwritten in the second, so say you have this:

First file:

 #something{
  background-color: #F00;
  color: #FFF;
 }

And then in the second file:

 #something{
  background-color: #000;
 }

Then the background color for #something will be overwritten in the second file to black but the color will stay the same since the second file doesn't say anything about it.

How to use the same name classes but in separate styles

If using SCSS is an option, you could create a file that imports the two files but wraps each in its own namespace. Something like:

.bootstrap {
    @import 'bootstrap.min.css';
}

.mdb {
    @import 'mdb.min.css';
}

This file should go in the same directory as bootstrap.min.css and mdb.min.css and should have a .scss extension. After running the above through an SCSS compiler, you will have one CSS file that you can link to in your HTML file instead of bootstrap.min.css and mdb.min.css. For example, if your new compiled file is named combined.css, then you would replace the link tags in your question with this:

<link href="/build/css/site/combined.css" rel="stylesheet">

You could then use the styles in your HTML like so:

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

Note that you must wrap your elements in a DIV (or other element) with a class of bootstrap or mdb to get the intended styling.