title: How can To override CSS Class with another in different css file
body: <p>I am working on MVC Project and I need to use 2 CSS stylesheets
  One I will loaded in the shared layout and the other in a view in the project </p>
  
  <p>the problem is the two files have some similar class names, and the classes in  the layout stylesheet always overrides the classes in the View stylesheet, </p>
  
  <p>I want the classes in view stylesheet to override the other(layout) in specific area of that view </p>
  
  <p><strong>Code:</strong> </p>
  
  <pre><code> &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="title"&gt;Dropdown Menu&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dropdown"&gt;First Menu &lt;i class="icon-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dropdown"&gt;Second Menu &lt;i class="icon-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dropdown"&gt;Third Menu &lt;i class="icon-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I just need to force this area to read styles from <code>style.css</code> not from any other stylesheet.</p>
  
  <p>Thanks in advance :)  </p>